react-tips2: route 的exact参数的设置问题

我不是女神ヾ 2022-03-18 01:17 288阅读 0赞

使用 react-router-dom 中的 <Route> 组件，这个组件有个参数  exact ,

下面举个例子,

<Route  path="/" component={Home} />
    <Route  path="/introduce" component={Introduce} />
    <Route  path="/detail" component={Detail} />

上面的三个路由，如果我们先输入的网址是根目录，那么会显示 Home 这个组件，因为匹配到了 path =" / ";

如果我们先输入的网址是 /introduce 那么会显示 Home 和 Introduce 这两个组件；

因为路由的匹配的时候不是严格按照 /introduce匹配的，所以导致这个问题；

<Route> 组件的参数 exact 的作用就是严格匹配路由；

上面的代码其实和下面这样写是一样的：

默认情况下没有参数exact 的效果等同于 exact = \{false\}

注意：  是 exact = \{ false \} , 而不是 exact = "false"

<Route  exact={false} path="/" component={Home} />
    <Route  exact={false} path="/introduce" component={Introduce} />
    <Route  exact={false} path="/detail" component={Detail} />

我们要解决上面的问题，设置 exact = \{ true \} 即可，如下：

<Route  exact={true} path="/" component={Home} />
    <Route  path="/introduce" component={Introduce} />
    <Route  path="/detail" component={Detail} />

当设置 根目录的路由为严格的匹配时，我们访问 /introduce 的的时候或者 /detail 的时候，

就不会再显示根目录显示的页面了；

出现上面的问题的原因是，路由在匹配的时候，比如我们现在访问 /introduce ，  / 根目录是 /introduce 的子集；

所以导致匹配成功，也就是说，没有设置严格匹配，也就是 exact = \{ true \} 的情况下，路由的子集也是符合匹配要求的；

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关 Django url中参数设置的问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

桃扇骨/ 2023年05月29日 05:11/ 0 赞/ 171 阅读

相关 Exact VM的介绍

Exact VM全称是Exact Memory Management Virtual Machine 诞生于jdk1.2，主要目的是解决解释型引擎执行效率低的问题，也是现代高

超、凢脫俗/ 2022年12月06日 15:12/ 0 赞/ 154 阅读

相关 socket参数的设置

![20160707223102380][] ![20160707223111396][] ![20160707223124340][] 下面的程序能够打印出

谁借莪１个温暖的怀抱￠/ 2022年07月20日 15:04/ 0 赞/ 191 阅读

相关 cursor_sharing参数设置exact,similar,force的区别

[Oracle][]中为了提高sql的执行效率，需要减少硬解析，实现shared cursor共享，最常见的方法是使用绑定变量，但很多时候由于各种原因未能在开发初期使用绑定变量

川长思鸟来/ 2022年05月28日 23:25/ 0 赞/ 59 阅读

相关关于EXECryptor参数设置的问题

关于EXECryptor参数设置的问题最近加壳一个字符处理的软件。发觉EXECryptor使用中存在的一些问题。在某些xp sp3的机器上，anti-debug如果勾选

淩亂°似流年/ 2022年05月15日 05:20/ 0 赞/ 243 阅读

相关 react-tips2: route 的exact参数的设置问题

使用 react-router-dom 中的 <Route> 组件，这个组件有个参数 exact , 下面举个例子, <Route path="/" co

我不是女神ヾ/ 2022年03月18日 01:17/ 0 赞/ 289 阅读

相关对routes,route,router的理解

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 =>

短命女/ 2022年01月31日 09:39/ 0 赞/ 299 阅读

相关 cursor_sharing参数设置exact,similar,force的区别

Oracle中为了提高sql的执行效率，需要减少硬解析，实现shared cursor共享，最常见的方法是使用绑定变量，但很多时候由于各种原因未能在开发初期使用绑定变量，对于减

曾经终败给现在/ 2022年01月07日 08:07/ 0 赞/ 127 阅读

相关 vue2.0中的$router 和 $route的区别

1.router 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局

ゞ浴缸里的玫瑰/ 2021年11月17日 09:02/ 0 赞/ 349 阅读

相关 Flask框架——app.route参数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

男娘i/ 2021年07月26日 01:50/ 0 赞/ 397 阅读