React路由安装使用和多种方式传参

Posted 2022-07-03 lishixiang-007

安装路由
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属性