这里简单介绍一下react路由基础的知识,以及基础操作
一,安装命令
npm install react-router-dom
二,路由模式
1.ReactRouter支持两种路由模式:BrowserRouter和HashHistory。
2.BrowserRouter使用URL中的/来定义路由,例如:http://xxx.com/Search
3.HashHistory使用URL中的#来定义路由,例如:http://xxx.com/#/Search
三,常用路由组件
BrowserRouter组件
1.一个app应用中最好只有一个BrowserRouter组件,最好放在最顶层所有组件之外,这样可以确保内部组件在使用Link做路由跳转时不会出现出错
Routes组件
1.用于将多个Route组件组合在一起。
Route组件
1.Route组件用于定义路由规则,组件可以嵌套使用,用于定义更复杂的路由规则。
2.Route的path属性用于定义路由的路径
3.Route的element属性用于定义路由对应的组件,element属性值必须写成标签的形式。
4.Route的index属性用于指定默认子路由。
Link组件
1.组件用于创建路由链接,类似于<a>标签
2.Link的to属性用于指定连接地址,它的值可以是字符串还可以是一个location对象。
四,传递参数
传递参数三种方式
search传参方式,例如:http://localhost:3000/fbetList?key=Michael
params传参方式,例如:http://localhost:3000/fbetList/Michael
state传参方式,例如:navigate('/home', { state: { key: 'Michael' } });
1.search方式传递参数
2.search方式接收参数
2.params方式传递参数
4.params方式接收参数
注意:
1.首先要配置正确路由路径,即正确的<BrowserRouter>、<Routes>、<Route>标签设置
2.navigate方法跳转的路径如果没有配置<Route>标签,那么跳转会发生未知的错误。
3.navigate方法跳转方式要与<Route>标签配置的跳转方式一致。
4.接收参数的方式要与路由跳转传递参数的方式一致。