react-router-dom的基本使用

1、下载react-router-dom库

在命令行输入

npm i react-router-dom

react-router分为web、native和any，具体用法可以参考这个文档：

https://react-router.docschina.org/web/example/basic

react-router-dom是web版本的

2、基本使用

1、 填写路由链接（就是写导航栏）

• 引入import {Link} from 'react-router-dom'
• 编写路由链接 ：靠路由链接实现切换组件。例如：

<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>

         这里的to后面只需要跟改变的路径，不要./about

2、注册路由（就是说明什么路由跳转到什么组件的）

• 引入import {Route} from 'react-router-dom'
• 注册路由，path是相应路由，component是跳转的组件（组件记得引入）

<Route path="/about" component={About}/>
<Route path="/home" component={Hbout}/>

3、把上面的12包含在同一个路由器中

为什么要包含在同一个路由器中呢？因为1只是实现了url上的路径的变化，这个变化需要 <BrowserRouter></BrowserRouter>去检测，然后 <BrowserRouter></BrowserRouter>发现发生了变化就提醒BrowserRouter中的注册的路由也就是2去发生变化。故1，2需要包含在同一个 <BrowserRouter></BrowserRouter>中，如果分别包含在2个路由器中，那么1的路由器检测到了路径发生变化，2的路由器是不知道的

• 引入import {BrowserRouter} from 'react-router-dom'
• 把<BrowserRouter></BrowserRouter>扩在最外面，也就是App外面，这样SPA内的所有路由的变化都会变同一个路由器监测到

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

除了 BrowserRouter（对应history的路由），还可以用HashRouter（对应hash的路由）

4、总结 

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili