在React中配置路由

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'