[TOC] 说明：小程序和vue的路由都是底层进行了封装react要手动配置 ### 1. 安装依赖 ~~~ 方式1：yarn add react-router-dom ① 首先使用yarn -v 查看是否安装yarn ② 安装yarn npm i yarn -g ③ yarn add react-router-dom 方式2：npm i react-router-dom --save ~~~ ### 2.在src下新定义一个Router.js组件 ~~~ import React from "react"; import { BrowserRouter as Router, Route} from "react-router-dom"; import App from './pages/App'; import Detail from './pages/Detail'; const AppRouter = () => ( <Router> <div> <Route path="/" exact component={App} /> <Route path="/detail/:id" component={Detail} /> </div> </Router> ); export default AppRouter; ~~~ ### 3.在入口文件index.js中引入路由 ~~~ import React from 'react'; import ReactDOM from 'react-dom'; import AppRouter from './Router'; ReactDOM.render(<AppRouter />, document.getElementById('root')); ~~~ ### 3.在要跳转的页面使用路由 ~~~ import React, { Component} from 'react' //1.引入Link import { Link } from 'react-router-dom' class MovieItem extends Component { render() { return ( //2.使用Link跳转 <Link to={'/detail/' + this.props.movie.id}> </Link> ) } } export default MovieItem ~~~ ### 5.在详情页接收参数 ~~~ componentDidMount(){ var id =this.props.match.params.id; console.log(id) } ~~~