1.新建文件
/routes/index.js
/routes/routes.js
2.封装路由文件
- index.js
可以导入相应的组件,也可以直接在里面定义组件,建议导入方式更清晰
import React,{
Component} from 'react';
//导入组件
import Banner from '../other/banner'
// 音乐组件
class Music extends Component {
render(){
return <h1>Music</h1>
}
}
//类别组件
class Category extends Component {
render(){
return <h1>Category </h1>
}
}
let routes = [
{
path:'/index',
component:Banner
},
{
path:'/tool',
component:Category
},
{
path:'/music',
component:Music
}
]
export default routes;
2.使用
- 注意:使用路由必须引入路由标签,并且使用 标签包裹
- routes.js
import React,{
Component} from 'react';
import {
BrowserRouter as Router, Route, Link} from 'react-router-dom'
import routes from './index' //当如封装的路由文件
class Routes extends Component {
constructor(){
super();
this.state = {
n:999
}
}
render(){
return (
<Router>
{
/* 跳转 */}
<ul>
<li>
<Link to='/index'>首页</Link>
</li>
<li>
<Link to='/tool'>工具模块</Link>
</li>
<li>
<Link to='/music'>音乐模块</Link>
</li>
</ul>
{
/* 渲染出口 */}
<div>
{
routes.map((item,i)=>{
return <Route key={
i} path={
item.path} component={
item.component} ></Route>
})
}
</div>
</Router>
)
}
}
export default Routes;