# 动态路由 平常我们定义的路由都是静态路由，如果需要传递参数就要用到动态路由 ## 路由参数 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> } } ```