React路由 基础：react-router-dom

这里简单介绍一下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.接收参数的方式要与路由跳转传递参数的方式一致。