React-router-dom路由的使用

原创于 2018-12-05 17:57:22 发布 · 880 阅读

CC 4.0 BY-SA版权

文章标签：

19 篇文章

订阅专栏

本文详细介绍React-router-dom的安装与基本使用方法，包括如何在项目中引入、使用Link和Route标签进行页面跳转与展示，以及如何正确包裹Router标签避免错误。同时，讲解了路由传参的实现方式。

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

1.项目引入react-router-dom
安装：

npm  install  react-router-dom --save

引入：

import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom'

2.使用:
使用Link标签作为跳转a标签

<Link  to='/path'  />

使用Route 标签作为显示(展示)标签。

<Route  path='/...'    component={组件名} />

3.注意：
使用路由时，需要在最外层包裹Router标签，否则会报错

render(){

	return(

	<Router>
		<Link  to='...' />
		...
		<Route path='/...'   component={...}>

	</Router>
)
}

4.路由传参：
只需在Route标签的path属性做小修改即可。

<Route   path='/路劲名/:id'     component={...} />
id为所接收的参数名

在组件内使用props属性内的match属性获取路由相关的属性值。match就相当于vue内的$route对象

this.props.match.url          //获取路由url
this.props.match.变量名       //获取路由传参的指定参数值