从Vue2.0到React17——React路由入门(一)-一一网

“这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战”

前言

React作为一个MVVM框架，路由功能是必不可少的，回顾我们在使用Vue Router的过程中，最常用的一些功能是路由页面的渲染，路由页面内容的添加，路由地址的配置，路由跳转，路由传参、嵌套路由等等，本文将去React Router中寻找这些常用功能的是如何实现的，来带你入门 React Router5.0。

一、安装

React Router 包含三个包：react-router、react-router-dom 和 react-router-native 。其中react-router是路由操作的核心包，react-router-dom是开发web应用时使用的包，react-router-native是开发React Native 移动应用时使用的包。

本文用 Create React App 脚手架来创建一个React项目，在其中演示React Router5.0的功能。

在一个文件夹中打开命令行工具，执行命令npx create-react-app react-router-demo。

安装成功后执行命令cd react-router-demo，进入React项目工程的文件夹中。

再执行命令cnpm install react-router-dom安装React Router5.0依赖包。

安装完成后，执行命令npm run start启动项目。

本文中所有的demo都在src/index.js文件中书写即可。

二、路由页面如何渲染

用 Route 组件来渲染，且一个 Router 组件只能渲染一个路由页面，渲染几个路由页面要写几个 Router 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
  <div>
    <BrowserRouter>
      <Route>
      </Route>
      <Route>
      </Route>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);
复制代码

其中 BrowserRouter 组件表示路由采用HTML5 History模式来跳转页面。

跟Vue Router中创建Router实例对象的构建选项mode的值为history一样的效果。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  mode: 'history',
});
export default routes;
复制代码

如果要采用 URL hash 值来跳转页面，可以使用 HashRouter 来包裹 Route 组件。

三、路由页面内容如何设置

通过用 Route 组件
上有个两个属性，可以设置路由页面中要渲染的内容。

render：函数，返回一个React组件。
component：值为一个React组件。
children：函数，返回一个React组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from "react-router-dom";
const helloWorld = () => {
  return (
    <div>component渲染路由页面内容</div>
  )
}
ReactDOM.render(
  <div>
    <BrowserRouter>
      <Route
        render={() => {
          return(
            <div>render渲染路由页面内容</div>
          )
        }}
      >
      </Route>
      <Route
        component={helloWorld}
      ></Route>
      <Route
        children={() => {
          return(
            <div>children渲染路由页面内容</div>
          )
        }}
      ></Route>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);
复制代码

访问 http://localhost:3000/ ，会发现页面上展示如下图所示

component和children三个属性，其展示那个设置的组件的优先级是children > component > render。

<Route
  component={helloWorld}
  render={() => {
    return (
      <div>render渲染路由页面内容</div>
    )
  }}
  children={() => {
    return (
      <div>children渲染路由页面内容</div>
    )
  }}
>
</Route>
复制代码

页面上只会展示“children渲染路由页面内容”。

四、如何设置路由地址

通过 Route 组件的path属性来设置路由地址。

path：路由地址，值为字符串或数组，会用path-to-regexp@^1.7.0转成正则表达式去匹配访问URL。为空时，任何访问URL都可以访问到该 Route 组件渲染的路由页面。
exact：是否开启精确匹配路由地址。
strict：为true时，若path后面有个/，那么访问URL后面必须有个/才能匹配上。

举个例子来介绍如何设置路由地址，例如，

用 http://localhost:3000/ 访问一个页面内容为“第一个页面”，

用 http://localhost:3000/two 访问一个页面内容为“第二个页面”

用 http://localhost:3000/three 访问一个页面内容为“第三个页面”

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
  <div>
    <BrowserRouter>
      <Route
        path="/"
        render={() => {
          return (
            <div>第一个页面</div>
          )
        }}
      >
      </Route>
      <Route
        path="/two"
        render={() => {
          return (
            <div>第二个页面</div>
          )
        }}
      ></Route>
      <Route
        path="/three"
        children={() => {
          return (
            <div>第三个页面</div>
          )
        }}
      ></Route>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);
复制代码

访问 http://localhost:3000/ ，会发现页面上展示如下图所示

访问 http://localhost:3000/two ，会发现页面上展示如下图所示

访问 http://localhost:3000/three ，会发现页面上展示如下图所示

为什么访问任意一个URL，“第一个页面”都会被渲染出来，这是因为第一个页面中的 Route 组件的path是/，访问URL是模糊匹配path的值，/two、/three都会匹配到/，导致“第一个页面”都会被渲染出来，只要给 Route 组件加上exact属性，就可以解决这个问题。

<Route
  path="/"
  exact
  render={() => {
    return (
      <div>第一个页面</div>
    )
  }}
>
</Route>
复制代码

还有为什么访问任意一个URL，“第三个页面”也都会被渲染出来，这是因为第三个路由页面的内容是用children配置的，不管访问URL是否匹配path属性的值，都会展示出来。要使用 Switch 组件来解决这个问题。

被 Switch 组件包裹的 Route 组件，只有第一个被访问 URL 匹配到的 Route 组件才会被渲染。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from "react-router-dom";
ReactDOM.render(
  <div>
    <BrowserRouter>
      <Switch>
        <Route
          path="/"
          exact
          render={() => {
            return (
              <div>第一个页面</div>
            )
          }}
        >
        </Route>
        <Route
          path="/two"
          render={() => {
            return (
              <div>第二个页面</div>
            )
          }}
        ></Route>
        <Route
          path="/three"
          children={() => {
            return (
              <div>第三个页面</div>
            )
          }}
        ></Route>
      </Switch>
    </BrowserRouter>
  </div>,
  document.getElementById('root')
);
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端