react-router-dom的基本使用

最新推荐文章于 2025-06-25 18:02:54 发布

原创最新推荐文章于 2025-06-25 18:02:54 发布 · 913 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #reactjs #react-router

React 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何在React应用中使用react-router-dom进行路由管理。首先，通过npm安装react-router-dom库。接着，展示了如何创建路由链接，如`<Link>`标签用于导航。然后，注册路由使用`<Route>`组件，指定path和对应的组件。最后，将所有路由包含在`<BrowserRouter>`中，确保路由变化能被正确检测。此外，还提到了另一种路由选择`<HashRouter>`。整体步骤包括设置导航链接、定义路由和包裹路由器，实现页面间的无刷新跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的路由）