react-router-dom和react-router-config

一、安装

npm i react-router-dom react-router-config –save

二、导入

import { BrowserRouter, Route, Link,Switch,NavLink } from 'react-router-dom';

import {renderRoutes} from 'react-router-config';

三、新建JS文件

home.js

import React from 'react';

 

export default function Home(){

   return (

      <div>

        <h1>这是主页</h1>

        <a href="/about">去about</a>

        <a href="/discover">去discover</a>

      </div>    

   )

}

about.js

import React from 'react';

import {Link} from 'react-router-dom';

import {renderRoutes} from 'react-router-config';

//变量的导出用export，而不是export default

export const About = (props)=>{

   const route = props.route

   return (  

      <div>

        <h1>这是关于</h1>

        <a href="/">去home</a>

        <a href="/discover">去discover</a>

        <Link to="/about/my">关于我的</Link>

        <br />

        <Link to="/about/you">关于你的</Link>

        {/*使用renderRoutes方法继续渲染子路由，第二个参数可以进行传参*/}

        {renderRoutes(route.childrens,{user:'hello'})}

      </div>

   )

}

discover.js

import React from 'react';

import {Link} from 'react-router-dom';

import {renderRoutes} from 'react-router-config';

 

export default function Discover(props){

   const route = props.route

   return (  

      <div>

        <h1>这是发现</h1>

        <a href="/">去home</a><br />

        <a href="/about">去about</a><br />

        <Link to="/discover/earth">发现地球</Link>

        <br />

        <Link to="/discover/star">发现星星</Link>

        {renderRoutes(route.childrens)}

      </div>

   )

}

之后，新建JS子文件my.js you.js star.js earth.js（略）

四、配置router.js

在src目录下新建文件夹（此处为route），然后在该目录下新建route.js文件，在route.js里进行文件的配置如下：

import Home from '../component/home'

import {About} from '../component/about'

import Discover from '../component/discover'

import Earth from '../component/earth'

import Star from '../component/star'

import My from '../component/my'

import You from '../component/you'

 const routes = [

   {

      path:'/',

      component: Home,

      exact:true

   },

   {

      path:'/about',

      component: About,

      childrens:[

        {

        path:'/about/my',

        component:My

        },

        {

        path:'/about/you',

        component:You

        }

      ]

   },

   {

      path:'/discover',

      component: Discover,

      childrens:[

        {

        path:'/discover/earth',

        component:Earth

        },

        {

        path:'/discover/star',

        component:Star

        }

      ]

   }

]

export {routes}
————————————————

五、在index.js中渲染路由

import React from 'react';

import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';

import { BrowserRouter} from "react-router-dom";

import { renderRoutes } from "react-router-config";

import './index.css';

import {routes} from './router/route';

使用renderRoutes方法渲染路由：

ReactDOM.render(<BrowserRouter>
{ renderRoutes(routes) }
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();

reference:https://blog.csdn.net/lijianxian199799/article/details/100762036

---END---