React路由配置
React路由配置
React路由配置
1. 安装路由 npm i react-router-dom -S
2. 使用导入模块
import { Route,HashRouter as Router,Link,NavLink,Redirect,Switch } from 'react-router-dom'3. 配置路由走向
<Router>
<Switch>
<Route exact path='/' component={Home}></Route>
...</Switch>
</Router>4. 动态路由
1. 语法:
<Route path='/about/:id' component={About}></Route>2. 进入页面
<Link to='/about/123'>我的</Link>
<Link to={'/about/'+变量}>我的</Link>或者编程式导航
this.props.history.push('/about/xxx')3. 获取动态参数
this.props.match.params5. 嵌套路由
1. 一级 二级 多级 ...2. 语法
1. 导入组件 把组件名称做路由配置
2. <Index path="/doc"><Switch>
<Route path="/doc/api" component={Api}></Route>
<Route path="/doc/core" component={Core}></Route>
{/* 二级路由重定向 */}
<Redirect to="/doc/api"></Redirect>
</Switch>
</Index>
3. 二级出口 Wendang
this.props.children6. 重定向
<Redirect from='' to=''/>
<Redirect from='/*' to='/'/>7. 编程式导航
组件配置路由配置
this.props.history.push()/replace()
this.props.history.go()/goBack()
更多推荐
所有评论(0)