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>
<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>
)
}
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();