模塊化react-router配置

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.js
import 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.js

import 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/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數據，重要的事情說三篇

注意點：嵌套路由千萬不要在<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

最後的結果爲：