react路由

最新推荐文章于 2024-08-23 10:50:15 发布

森姐姐

最新推荐文章于 2024-08-23 10:50:15 发布

阅读量149

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/weixin_42799526/article/details/114219248

版权

react 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了React Router的基本使用方法，包括导航组件Link与NavLink的区别、Switch组件的作用、路由组件与普通组件的不同之处，以及如何实现路由的严格匹配和模糊匹配等高级特性。

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

一、路由的基本使用

1、明确好界面中的导航区，展示区
2、导航区的a标签改为Link标签

<Link to='/xxx'>Demo</Link>

3、展示区写Route标签进行路径的匹配

<Route path='/xxx' component={Demo} />

4、的最外侧包裹了一个或

二、路由组件与一般组件

1、写法不同：

      一般组件：<Demo />
      路由组件：<Route path='/demo' component={Demo} />

2、存放位置不同：
一般组件：components
路由组件：pages
3、接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性

history:
     go: f go(n)
     goBack: f goBack()
     goForward: f goForward()
     push: f push(path, state)
     replace: f replace(path, state)
location:
     pathname: '/about'
     search: ''
     state: undefined
match:
     params: {}
     path: '/about'
     url: '/about'

三、NavLink(Link的升级版)

<NavLink activeClassName='atguigu' className='list-group-item' to='/about'>About</NavLink>

activeClassName定义被当前被选中的类名

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
标签体内容是一个特殊的标签属性
通过this.props.children可以获取标签体内容

四、Switch的使用

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率（单一匹配）。

四、多级路径样式丢失的问题-三种解决办法

<link rel='stylesheet' href='./css/bootstrap.css' />

// 方法一
<link rel='stylesheet' href='/css/bootstrap.css' />
// 方法二
<link rel='stylesheet' href='%PUBLIC_URL%/css/bootstrap.css' />
// 方法三
// 将路由的history模式，修改成hash模式

public/index.html 中引入样式时，不写 ./ 写 / （常用）
public/index.html 中引入样式时，不写 ./ 写 %PUBLIC_URL% （常用）
使用HashRouter

五、路由的严格匹配与模糊匹配

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

六、Redirect的使用

1、一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2、具体编码

<Switch>
    <Route path='/about' component={About} />
    <Route path='/home' component={Home} />
    <Redirect to='/about' />
</Switch>

七、嵌套路由

注册子路由时，要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的

八、BrowserRouter与HashRouter的区别

1、底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2、path表现形式不一样
BrowserRouter的路径中没有#
HashRouter的路径中包含#
3、刷新后对路由state参数的影响
（1）BrowserRouter没有任何影响，因为state保存在history对象中。
（2）HashRouter刷新后会导致路由state参数的丢失！！！
4、备注：HashRouter可以用于解决一些路径错误相关的问题。