模塊化react-router配置方法詳解

2019-11-19 11:24:46

字體：大中小

來源：轉載

供稿：網友

react-router模塊化配置

因為公司的需要最近踏進了react坑，一直在挖坑填坑，在路由這一塊折騰得不行。

直接進入主題，配置react-router模塊化

1.先下載react-router-dom

npm install react-router-dom --save

2.在相應的文件引入react-router-dom相應的模塊

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

3.在src子創建一個module目錄，接著在module目錄在創建一個router.js文件，用來配置路由。

//router.jsimport Index from '../components/Index'import New from '../components/New'  import NewList from '../components/NewList'  import NewContent from '../components/NewContent'  const routes = [    {    path:"/",    component:Index,    exact:true  },  {    path:"/new",    component:New,    routes:[      {        path:"/new/",        component:NewContent      },      {        path:"/new/newList",        component:NewList      }    ]  },  ]export default routes

4.在app.js根目錄添加相應的跳轉路徑。

//app.jsimport React from 'react';import './App.css';import { BrowserRouter as Router, Route, Link } from "react-router-dom";import router from "./modules/routers"function App() { return (  <Router>      <nav className="nav">        <ul>          <li>            <Link to="/">首頁</Link>          </li>          <li>            <Link to="/new">新聞</Link>          </li>        </ul>      </nav>      {        router.map((router,index)=>{                      if(router.exact){                            return <Route exact key={index} path={router.path}                render = {                  props =>(                    <router.component {...props} routes = {router.routes}/>                  )                }              />                          }else{                            return <Route key={index} path={router.path}                render = {                  props =>(                    <router.component {...props} routes = {router.routes} />                  )                }              />                          }                  })      }    </Router> );}export default App;

注意點：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數據，重要的事情說三篇

解析一下，<Route/>里面的render,這是官方給出的一種固定寫法，為了解決父路由傳遞數據給子路由接受不到的問題。render是一個對象，里面是一個箭頭函數，箭頭函數放回<router.component {...props} routes = {router.routes} />一個標簽，router.component的router對于的是你map傳進來的那個形參，傳啥寫啥；component 是配置文件對應的component ，routes 是傳給子路由的數據、（子路由通過this.props.routes 接收）

5.在有子路由的頁碼配置跳轉

import React ,{Component} from 'react';import { BrowserRouter as Router, Route, Link } from "react-router-dom";class New extends Component{    render(){        return(            <div className="box">        <div className="left">          <ul>            <li>              <Link to="/new">New</Link>            </li>            <li>              <Link to="/new/newList">NewList</Link>            </li>          </ul>        </div>        <div className="right">          {            this.props.routes.map((item,index)=>{                            return <Route key={index} exact path={item.path} component={item.component}></Route>                          })          }        </div>      </div>          )      }  }export default New

最后的結果為：