[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) } ~~~