~~~ yarn add react-router-dom npm i react-router-dom --save ~~~ ## 1.定義一個`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; ~~~ ## 2.在入口文件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 ~~~ ## 4.在詳情頁接收參數 ~~~ componentDidMount(){ var id =this.props.match.params.id; console.log(id) } ~~~