安装路由
npm i react-router-dom -S
引入路由
import {
BowserRouter as Router,
Route,
Switch,
...
} from "react-router-dom"
整个项目顶层需要用<Router>包裹 并且 <Router>组件内只能有一个直接子级元素
例如:
let App = props => (<Router>
<div>
<Route path="xxx" component={xxx} />
<Route path="xxx" component={yyy} />
...
</div>
</Router>)
render(<App />,document.getElementById("app"))
使用BowserRouter需要对服务器做配置 对于webpack-dev-server而言 需要添加属性
devServer : {
conentBase:"",
...,
historyApiFallback:true,
disableHostCheck: true,
}
Route组件有下列属性
path : 路径
component : 组件
redirect : 重定向
exact : 严格匹配
react中 4.0之后的路由采用的是分布式路由 <Route> 本身即路由窗口
在该版本的路由中 默认即多视图路由
只要多个Route 配置相同路径 即可在同一路径下加载多个组件
若只希望一个路径下仅加载一个组件 用<Switch>包裹住多个<Route>即可
例如:
<Switch>
<Route path="xxx" component={xxx} />
<Route path="xxx" component={yyy} />
</Switch>
此时 路径为xxx时 仅加载xxx而并非加载 xxx 和 yyy
路由跳转
标签跳转
<Link to={ {pathname:"/home"} }>首页</Link>
js跳转(编程式导航)
this.props.history.push()
this.props.history.replace()
值得注意的是 并非所有组件的props都有history属性
仅在通过<Route>加载进来的组件 props下才会存在history属性
如果props不存在history属性的子组件也想通过js实现路由跳转
可用props有history属性的父组件通过props传递给子组件即可
路由传参
search传参(问号传参)
<Link to{ {pathname:"/home",search:data }></Link>
接收参数
this.props.location.search 接收即可
只是此时 search为字符串类型格式如下: username=zhuiszhu&age=18
需要我们手动转换成对象才能方便使用
params传参(动态路由)
路由配置
<Route path="/detail/:id" />
传递参数
let goodsID = 123
<Link to={pathname:"/detail/"+goodsID} ></Link>
接收参数 this.props.match.params.id 此处props的math同上述中的history属性