·因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松

第一步 先安装路由依赖

yarn add react-router-dom --save
yarn add react-router-config --save

第二部 配置路由文件

新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件

 import React from 'react';import Home from '../pages/Home'import About from '../pages/About'import page2 from '../pages/Page2'const routes = [{path: '/',component: Home,children: [{path: '/about',component: About,}]},{path: '/page2/:id', //动态路由component: page2}]export {routes}

第三部 在react的index.js中导入路由

 import React from 'react'; // react 基础库import ReactDOM from 'react-dom'; // react渲染dom的库import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import {routes} from './router/index'import { HashRouter } from 'react-router-dom'import { renderRoutes } from 'react-router-config'// console.log(renderRoutes)ReactDOM.render(<HashRouter>{renderRoutes(routes)}</HashRouter>,document.getElementById('root'));// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

home组件的内容

import { Component } from 'react';
import {renderRoutes} from 'react-router-config'
import { Link } from 'react-router-dom'
class Home extends Component {constructor(props) {super()// console.log(props)this.state = {routes: props.route.children}}render() {return (<div>这是home页面 <Link to="/about">进入about页面</Link>{renderRoutes(this.state.routes)}</div>)}
}export default Home

这是about页面的内容

 import { Component } from 'react';class About extends Component {render() {return (<div>这是about页面</div>)}}export default About

react 路由传参的方法

跳转开始的页面

 import { Link } from 'react-router-dom'import { Component } from 'react';class Home extends Component {constructor(props) {super()}render() {return (<div><Link to={{patename: "定义的路由地址", query: {id: 123}}}>进入about页面</Link></div>)}}

跳转进入的页面

import { Link } from 'react-router-dom'import { Component } from 'react';class About extends Component {constructor(props) {super()}render() {console.log(this.props.history.location.query) // 页面获取query参数的方法// 如果是动态路由 获取参数的方法 this.props.match.params.keyreturn (<div>about页面</Link></div>)}}