=> github上的文档
react-router-dom的使用
首先下载 ## 注意下的是react-router-dom 而不是 react-router
npm install react-router-dom
yarn add react-router-dom
路由有两种形式 :
1.BrowserRouter 是histroy模式
2.hashRouter是hash模式
由于BrowserRouter看起来更正规 所以下面拿BrowserRouter来举例子,其实两者使用方式差不多, 下面引入的是histroy模式
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
可直接在项目的index.js中引入router,包裹住根实例,这样根实例就有了一些路由的属性和方法
// index.js
// 根实例渲染
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
在配置路由组件时有两种写法
1.componnet直接写一个组件
2.render返回一个组件
exact表示完全匹配
<Route path = '/active/:id' component = {Active} />
<Route path = '/' exact render = {()=>{
return <Redirect to = '/todoList' />
}} />
react-router 给我们提供了两种导航:
1.Link 无论在哪里使用都会把当前的标签渲染成a标签 href指向to属性的位置
2.NavLink 是一种特殊类型的<Link>,当它的to prop匹配当前位置时,它可以给自己生成“active”的类名。同时也可以用activeClassName来自定义类名。从而可以自定义样式。
两个标签都默认渲染成a标签 如果想像Vue一样生成指定标签 可以看我的另一篇博客 实现tag重置标
<Link to = '/todoList'>TodoList</Link>
<NavLink activeClassName = 'ok' to = '/user'>User</NavLink>
路由参数的传递 都在跳转的时候传参数
1.params 需要在路由中做配置 <Route path = '/active/:id' component = {Active} /> 用match.params.id取到
2.query 无需做配置
用location.search 取得
<NavLink to = {{pathname : '/active/6199',search : '?'+ qs.stringify(query)} } >Active</NavLink>
3.state参数
定义路由:<Route path='/user' component={UserPage}></Route>(无需做多余的配置)
var data = {id:3,name:sam,age:36};
var path = { pathname:'/user', state:data, }
使用1.<Link to={path}>用户</Link>
2.hashHistory.push(path);
获取数据 var data = this.props.location.state; var {id,name,age} = data;
注意: state传参不会显示在地址栏中,只保存在this.props中。刷新就会变成undefined
// 传参 qs是node.js的queryString模块
let query = { name: 'Alice', age: 16 }
<NavLink toObj tag = 'li' to = {{pathname : '/active/6199',search : '?'+ qs.stringify(query)} } >Active</NavLink>
配置二级路由
switch表示只匹配第一次匹配到的一个路由,防止向下重复匹配
<Route path = '/user' render = {({match})=>{ // 由于User 是一个路由组件 使用接收的参数是一个路由对象 有match history location
// 做二级路由时 为了方便维护 应该把路径名换成变量
return (
<User> // 在user组件中用this.props.children来接收
<p>
type:
<ActiveNavLink to = {`${match.path}/my`}> my </ActiveNavLink>
<ActiveNavLink to = {`${match.path}/login`}> login </ActiveNavLink>
</p>
<Switch>
{/* 配置二级路由时 使用switch 只匹配到1项 并给重定向加exact */}
<Redirect from = {`${match.path}`} exact to = {`${match.path}/my`} />
<Route path = {`${match.path}/my`} render = {()=>{return (<h1>欢迎回来</h1>)}}/>
<Route path ={`${match.path}/login`} render = {()=>{return (<h1>还没有登录请登录</h1>)}}/>
</Switch>
</User>
)
}}/>