react封装router实现一级二级页面展示!!!

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

第一步下载我们需要的插件

npm install react-router-dom -s

标题建立一个router的文件夹

路由集成文件

上面routes文件内的router.config.js文件是我们的所有页面组件的集成文件，如下方：

import loadable from "@/utils/routeload"//这里做了路由懒加载的功能

export default [{
    path:"/index",
    component:loadable(()=>import("@/pages/homeIndex")),
    children:[{
        path:"/index/indexPage",
        component:loadable(()=>import("@/pages/homeIndex/home")),
        name:"home",
        meta:{
            text:"首页",
            show:false
        }
    }
    }]

路由表

下面的router.js是我们的路由表用来做路由的显示，如下方：

我们先来讲讲react-router-dom里面的一些组件

1、Switch这个组件是用来查找匹配的路由，一般包裹着Route使用。

假设我们有3个页面a、b、c三个页面，此时如果url是/a，那么a、b、c这三个页面都会被渲染，因为他们的path全被匹配到了，当我们只想选择一个页面的时候只要url为/a的时候，Switch就会处理这个问题，它会寻找匹配的route，<Route path="/a">找到后就会停止匹配并渲染出a页面的内容

2、Route这个组件的意思就是路由，里面有两个属性一个path（页面路径），一个render（渲染页面组件）

3、 Redirect是重定向的意思，这里有一个exact,这个是干嘛的呢，是精准匹配的意思。

import React, { Component } from 'react'
import { Switch, Redirect, Route } from "react-router-dom"
export default class Router extends Component {
    render() {
        let { data }=this.props;
        data = data||[]
        const routerdata = data.filter(item => item.component);//路由数据
        const redirect = data.filter(item => item.redirect);//重定向数据
        return (
                <Switch>

                    {/* 路由 */}
                    {
                        routerdata.map((item,key) => {
                            return <Route key={key} path={item.path}  render={ props => {
                                if (item.children) {
                                    /*这里的item.children就是二级接受的那个props*/
                                    return <item.component routeData={item.children} {...props}></item.component>;//这里现实的二级路由，子路由
                                } else {
                                    return <item.component {...props}></item.component>;//这里一级路由
                                }
                            }}></Route>
                        })
                    }
                    {/* 重定向 */}
                    {
                       redirect.map((item,key) => {
                           return <Redirect key={key} exact from={item.path} to={item.redirect}></Redirect>
                       }) 
                    }
                </Switch>       
        )
    }
}

做好了路由封装后就在app页面引入就可以了

这里我们讲一下BrowserRouter，可能有的人还用过HashRouter,我也没用过Hash这个，看了一下资料这里做个简单的解释，这两个的不同

还是假设我们要进入a页面

1、BrowserRouter： http://localhost:3000/a

2、HashRouter：http://localhost:3000/#/a hash就是#后面的url

import "./style/index.scss"
import {BrowserRouter} from "react-router-dom";
import routeDatas from "@/routes/router.config.js";//页面的集成文件
import RouterView from "@/routes/router.js";//引入的路由表

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <RouterView data={routeDatas}></RouterView>//这里的data当成参数传走
    </div>
    </BrowserRouter>
  );
}
export default App;

上面做了一级的展示，接下来是二级的展示，有点绕，但还是很简单的，记住两点。

1、是否有children子集

2、参数的传递

接下来我在下面的某一个页面准备放进去一个二级页面

<Content className={style.contenter} style={{marginTop: 60 }}>
   <RouterView data={props.routeData}></RouterView>
</Content>

这里面的Content不要管，是我用的一个antd的layout的一个组件，看里面的RouterView组件是不是和刚刚的一级一样，唯一不同的就是这里的传递的参数是props.routeData，这里的props是哪里来得呢（注意咱们用的是class类组件，函数组件另说），好，在考虑props这个从哪里来，回到上面我们写的路由表的地方，若上面你看明白了话，哇，你真棒哦，若你没看明白，那好，还不赶紧回去看一看 好啦

今天学习一点点🤏🏻，下期再见