【React】路由(二)

最新推荐文章于 2022-12-07 18:30:03 发布

01xm

最新推荐文章于 2022-12-07 18:30:03 发布

阅读量374

点赞数 1

分类专栏： react JavaScript 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Bon_nenul/article/details/121061411

版权

JavaScript 同时被 2 个专栏收录

44 篇文章 3 订阅

订阅专栏

react

12 篇文章 1 订阅

订阅专栏

React路由

1. Switch的使用

1.通常情况下，path和component是一一对应的关系。

2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/home" component={Home}/>
  <Route path="/home" component={Test}/>
</Switch>

2. 样式错误

拿上面的案例来说：

这里面会有一个样式：

在这里插入图片描述
此时，加载该样式的路径为：
加载样式路径
但是在写路由的时候，有的时候就会出现多级目录，

<MyNavLink to = "/cyk/about" >About</MyNavLink>

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

这个时候就在刷新页面，就会出现问题：

样式因为路径问题加载失败，此时页面返回public下面的Index.html
在这里插入图片描述
解决这个问题，有三个方法：
1.样式加载使用绝对位置

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

2.使用 %PUBLIC_URL% （常用,但只在react中有效果）

 <link href="%PUBLIC_URL%/css/bootstrap.css" rel="stylesheet">

3.使用HashRouter

因为HashRouter会添加#，默认不会处理#后面的路径，所以也是可以解决的

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8" />
  	<title>react脚手架</title>
       <!-- 方法二 -->
  	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
         <!-- 方法一 -->
  	<link rel="stylesheet" href="/css/bootstrap.css">
  </head>
  <body>
  	<div id="root"></div>
  </body>
</html>

3. 模糊匹配和精准匹配

react默认是开启 模糊匹配 的。

比如：

<MyNavLink to = "/home/a/b" >Home</MyNavLink>

此时该标签匹配的路由，分为三个部分 home a b；将会根据这个先后顺序匹配路由。

如下就可以匹配到相应的路由：

<Route path="/home"component={Home}/>

但是如果是下面这个就会失败，也就是说他是根据路径一级一级查询的，可以包含前面那一部分，但并不是只包含部分就可以。

<Route path="/a" component={Home}/>

当然也可以使用这个精确的匹配 exact={true}

如以下：这样就精确的匹配/home，则上面的/home/a/b就不行了

<Route exact={true}  path="/home" component={Home}/>
或者
<Route exact path="/home" component={Home}/>

4. Redirect的使用(初始化路由)

在配置好路由，最开始打开页面的时候，应该是不会匹配到任意一个组件。这个时候页面就显得极其不合适，此时应该默认的匹配到一个组件。

初始化路由

此时就需要使用Redirect进行默认匹配了。如下的代码就是默认匹配/home路径所到的组件

<Switch>
    <Route path="/about"component={About}/>
    {/* exact={true}：开启严格匹配的模式，路径必须一致 */}
    <Route   path="/home" component={Home}/>
    {/* Redirect:如果上面的都没有匹配到，就匹配到这个路径下面 */}
    <Redirect  to = "/home"/>
</Switch>

5. 嵌套路由

简单来说就是在一个路由组件中又使用了一个路由，就形成了嵌套路由。

举个例子来说：

我们在home这个路由组件中又添加两个组件：

-------------------注册一级路由-----------------------------
  {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
  <MyNavLink to="/about">About</MyNavLink>
  <MyNavLink to="/home">Home</MyNavLink>
   {/* 注册路由 */}
  <Switch>
  	<Route path="/about" component={About}/>
  	<Route path="/home" component={Home}/>
  	<Redirect to="/about"/>
  </Switch>
----------------------注册二级路由 :Home组件-----------------------------------
   <div>
  	<ul className="nav nav-tabs">
  		<li>
  			<MyNavLink to="/home/news">News</MyNavLink>
  		</li>
  		<li>
  			<MyNavLink to="/home/message">Message</MyNavLink>
  		</li>
  	</ul>
  	{/* 注册路由 */}
  	<Switch>
  		<Route path="/home/news" component={News}/>
  		<Route path="/home/message" component={Message}/>
  		<Redirect to="/home/news"/>
  	</Switch>
  </div>

react中路由的注册是有顺序的，因此在匹配的时候也是按照这个顺序进行的，因此会先匹配父组件中的路由,注册子路由时要写上父路由的path值

比如上面的 /home/news的路由处理过程：

1.因为父组件home的路由是先注册的，因此在匹配的时候先去找home的路由，也就是根据/home/news先模糊匹配到/home

2.在去Home组件里面去匹配相应的路由，从而找到了/home/news进行匹配，因此找到了News组件。

但是如果开启精确匹配，就会在第一步的时候卡住，这个时候就走不下去了。因此不要轻易的使用精确匹配

01xm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React】路由(二)

React路由1. Switch的使用2. 样式错误3. 模糊匹配和精准匹配4. Redirect的使用(初始化路由)5. 嵌套路由1. Switch的使用1.通常情况下，path和component是一一对应的关系。2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配<Switch> <Route path="/about" component={About}/> <Route path="/home" component=
复制链接

扫一扫