React-路由（二）-CFANZ编程社区

React-路由（二）_javascript

🌈个人主页：前端青山 🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-路由（二）

1、嵌套路由

2、重定向与404路由

2.1、重定向路由

2.2、404路由

3、三种路由渲染方式

4、withRouter

1、嵌套路由

const routes = [
    // 父路由规则
    {
        path: "/admin",
        component: Admin,
        // 子路由规则
        children: [
            {
                path: "index",
                component: Index
            },
            {
                path: "user",
                compnent: User
            }
        ]
    }
]

在有一些功能中，往往请求地址的前缀是相同的，不同的只是后面一部份，此时就可以使用多级路由（路由嵌套）来实现此路由的定义实现。

例如，路由规则如下

/admin/index
/admin/user
/admin/goods
/admin/add

它们路由前缀的admin是相同的，不同的只是后面一部份。

思想：

借助react路由默认是非严格匹配模式的便利（路由规则是：/abc）

例如。上述路由都有/admin开头，那么我们可以在路由定义时定义一个组件的路由规则“/admin”。如果这样做，则上述4个路由都会匹配上这个路由规则。匹配的这个组件我们称之为父组件
扩展：如果某个路由需要使用严格模式，请在这个路由上加上一个属性：exact

再在父组件中写嵌套的子路由的匹配规则

实现方式

先需要定义个组件，用于负责匹配同一前缀的路由，将匹配到的路由指向到具体的模块

创建模块路由组件（父）负责指定各个子路由的去向

render() {
    // 获取前缀，供后续地址做路由拼接
    let prefix = this.props.match.path;
    return (
        <div>
            <h1>欢迎使用后台管理程序</h1>
            <Route path={`${prefix}/user`} component={User}></Route>
            <Route path={`${prefix}/goods`} component={Goods}></Route>
        </div>
    );
}

创建父路由中的子路由需要的组件

2、重定向与404路由

2.1、重定向路由

React的重定向路由有以下写法：

在重定向的时候需要知道，从哪里来，到哪里去，因此该组件需要使用2个属性：

from：匹配需要重定向的路由
to：需要去往的路由

import { Redirect } from "react-router-dom"

<Redirect from="/from" to="/to"></Redirect>

注意：

建议使用Route书写路由规则时，使用Switch组件包裹Route组件，以便最多只能匹配一个规则
建议给Redirect组件加上exact属性，来设置严格匹配模式

2.2、404路由

项目中少不了404页面的配置，在React里面配置404页面需要注意：

需要用到Switch组件，让其去包裹路由的Route组件（Switch组件保证只渲染其中一个子路由）

import NotFound from "./Components/404";

<Route>
    <NotFound></NotFound>
</Route>
// 或
 <Route component={NotFound}></Route>

注意：在404路由的位置，不需要给定具体的路由匹配规则，不给path表示匹配*，即所有的路由都会匹配，因此用404路由一定要加Switch匹配一个路由。

注意：并不会因为当前是404路由/重定向路由而改变状态码，因为当前写的是前端的内容，状态码是后端提供的，只有等后期上线以后才能有状态码。

例如：

<div>
    <Link to="/home">家</Link>  
    <Link to="/news">新闻</Link> 
    <Link to="/about">关于</Link> 
    <Redirect from="/" to="/home"></Redirect>
    <Switch>
        <Route path="/home" component={Cmp11}></Route>
        <Route path="/news" component={Cmp12}></Route>
        <Route path="/about" component={Cmp13}></Route>
        <Route component={NotFound}></Route>
    </Switch>
</div>

3、三种路由渲染方式

v6中采用了新的属性对组件进行渲染，属性名：element

Route路由渲染组件是用于路由规则匹配成功后组件渲染容器，此组件提供了3种方式组件渲染方式：

component属性（组件对象/函数）

<Route path="/home" component={Home} />
<Route path="/home" component={(props) => <Home />} />

render属性（函数）

<Route path="/home" render={(props) => <Home />} />

children属性（组件/函数）

<Route path="/about" children={(props) => { if(props.match){ return <div>children渲染</div> } }} />
<Route path="/about" children={<About />} />

注意点

当children的值是一个函数时，无论当前地址和path路径匹不匹配，都将会执行children对应的函数，当children的值为一个组件时，当前地址和path不匹配时，路由组件不渲染
children函数方式渲染，会在形参中接受到一个对象，对象中match属性如果当前地址匹配成功返回对象，否则null

4、withRouter

作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

默认情况下，必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，才能执行this.props.history.push('/uri')跳转到对应路由的页面。然而不是所有组件都直接与路由相连的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props。

// 引入withRouter
import { withRouter} from 'react-router-dom'

// 执行一下withRouter
export default withRouter(Cmp)

该高阶组件是路由包自带的东西，因此只需要引入+使用就可以了，不需要自己定义。

V5与V6的变化

Switch被废弃，由Routes替代，并且Routes是必须的
渲染组件的方式被element属性替代，例如：

<Route path="/dashboard" element={<Dashboard />} />

重定向组件Redirect被废弃，使用以下语法替代：

<Route path="/" element={<Navigate to="/dashboard/welcome" />} />

嵌套路由被简化

父路由：

<Route path="/dashboard/*" element={<Dashboard />} />

子路由（子路由规则中不再需要写父前缀）：

<Route path="welcome" element={<Welcome/>}/>

废弃了withRouter