模块化react-router配置方法详解

npm install react-router-dom --save

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

//router.js
import Index from '../ponents/Index'
import New from '../ponents/New'
  import NewList from '../ponents/NewList'
  import NewContent from '../ponents/NewContent'
  
const routes = [
  
  {
    path:"/",
    ponent:Index,
    exact:true
  },
  {
    path:"/new",
    ponent:New,
    routes:[
      {
        path:"/new/",
        ponent:NewContent
      },
      {
        path:"/new/newList",
        ponent:NewList
      }
    ]
  },
  
]

export default routes

//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.ponent {...props} routes = {router.routes}/>
                  )
                }
              />
              
            }else{
              
              return <Route key={index} path={router.path}
                render = {
                  props =>(
                    <router.ponent {...props} routes = {router.routes} />
                  )
                }
              />
              
            }
          
        })
      }
    </Router>
 );
}

export default App;

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} ponent={item.ponent}></Route>
              
            })
          }
        </div>
      </div>
      
    )
    
  }
  
}

export default New