# 動態路由 平常我們定義的路由都是靜態路由，如果需要傳遞參數就要用到動態路由 ## 路由參數 1. 注意要添加exact嚴格模式 2. 路由參數和vue一樣，通過/:name 3. 組件中使用，[是通過this.props.match.params.name](http://xn--this-zi0is34suqa.props.match.params.name) ## 修改入口文件main.js React的動態路由和Vue很相似，也是在定義路由時書寫`:name`即可。 ``` ReactDom.render( // 開啟路由世界的大門 路由的根地址，只能擁有一次 <HashRouter> {/*導航 Link Vue的用法很相似 注意這里是大寫*/} <Link to={"/home"}>首頁</Link> <Link to={"/about"}>關于</Link> <Link to={"/news/1"}>新聞1</Link> <hr/> {/*路由指向哪個頁面 （組件）有兩個意義 定義路由指向 在哪個位置顯示頁面*/} <Route path={'/home'} component={Home}/> <Route path={'/about'} component={About}/> <Route path={'/news/:id'} component={News}/> </HashRouter> , document.getElementById('root')) ``` ## 修改news.js組件 在匹配的組件中通過`this.props.match.params.id`來獲取數據 ``` import React,{Component} from 'react' export default class News extends Component{ constructor(props){ super(props) this.state={} console.log(this) } render() { return <div>這是News組件ID為{this.props.match.params.id}</div> } } ```