react路由（react-router-dom和react-router-config的结合应用）

react路由

（react-router-dom和react-router-config的结合应用）

1.安装

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

2.导入（需要的页面）

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

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

3.新建三个主页面js文件

home.js

import React from 'react';

export default function Home(){

return (

<div>

<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>

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

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

<br />

{/*使用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>

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

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

<br />

{renderRoutes(route.childrens)}

</div>

)

}

4.新建子页面js文件

my.js

import React from 'react';

export default function My(props){

return (

<div>

<h1>这是关于我的</h1>

<p>{props.user}</p>

</div>

)

}

you.js

import React from 'react';

export default function You(){

return (

<div>

<h1>这是关于你的</h1>

</div>

)

}

star.js

import React from 'react';

export default function Star(){

return (

<div>

<h1>这是发现星星</h1>

</div>

)

}

earth.js

import React from 'react';

//<p>{props.match.params.id}</p>

export default function Earth(props){

return (

<div>

<h1>这是发现地球</h1>

</div>

)

}

5.配置route.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}

6.在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();

101男孩

发布了5 篇原创文章 · 获赞 3 · 访问量 3万+

私信关注