1.下载路由的核心中间件
npm i react-router-config -s
npm i react-router-dom -s
2.在index.js文件中引入,并包裹App这个展示组件
3.在App.js文件中引入路由中间件,然后配置一些代码
3.1引入的中间件
// 路由模块
import {Link} from 'react-router-dom'
//占位符相当于router-view,展示
import {renderRoutes} from 'react-router-config'
3.2要配置的代码
function App() {
return (
<div className="App">
{/* 跳转 */}
<div className='router-head'>
<Link to='/'>首页</Link>
<Link to='/list'>列表</Link>
</div>
{/* 展示 */}
<div className='router-body'>
{renderRoutes(routes)}
</div>
</div>
);
}
4.在router中新建一个index.js文件
5.在src目录下新建一个views模板页,然后建俩个页面文件,然后添加代码
import { Component } from "react";
class List extends Component{
render(){
return(
<div>
this List page
</div>
)
}
}
export default List
6.在router的index.js文件中引入文件,编辑路由
import Home from '../views/home'
import List from '../views/List'
const Routes=[
{
path:'/',
//开启精准匹配
exact:true,
component:Home
},
{
path:'/list',
//开启精准匹配
exact:true,
component:List
},
]
export default Routes;
7.在App.js中引入路由
import routes from './router';
8.重启项目
npm start
8.1重启项目之后会报错提示@有问题,在router的index.js文件中修改一下引用,即可
import Home from '../views/home'
import List from '../views/List'