有人能解释一下两者的区别吗

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

and

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

我不知道确切是什么意思。


当前回答

简而言之,如果你为你的应用程序的路由定义了多条路由,包含Switch组件,像这样;

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

然后你必须把确切的关键字的路由,它的路径也包括在另一个路由的路径。例如,主路径/包含在所有路径中,因此它需要有精确的关键字来与其他以/开头的路径区分开来。原因也类似于/functions路径。如果你想使用另一个路由路径,如/functions-detail或/functions/open-door,其中包含/functions,那么你需要为/functions路由使用exact。

其他回答

最简短的回答是

请尝尝这个。

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>

看看这里:https://reacttraining.com/react-router/core/api/Route/exact-bool

准确:bool

当为true时,仅当路径与位置匹配时才匹配。路径名。

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

如果你为你的应用程序的路由定义了多条路由,并包含了名称相似的routes组件,我们可能会遇到不可预测的行为。

例如:

<Routes>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Routes>

可能会导致一些错误

/users/create

因为一旦react找到一个与regex user*匹配的根,它就会将你重定向到/users路由

像这样使用exact

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

react - v6的新版本不再支持exact。

如他们的文件所述:

你不需要再使用一个精确的道具了。这是因为默认情况下所有路径都完全匹配。如果你想匹配更多的URL,因为你有子路由,请使用后面的*,如<Route path="users/*">

简而言之,如果你为你的应用程序的路由定义了多条路由,包含Switch组件,像这样;

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

然后你必须把确切的关键字的路由,它的路径也包括在另一个路由的路径。例如,主路径/包含在所有路径中,因此它需要有精确的关键字来与其他以/开头的路径区分开来。原因也类似于/functions路径。如果你想使用另一个路由路径,如/functions-detail或/functions/open-door,其中包含/functions,那么你需要为/functions路由使用exact。

通过使用exact,您可以确保主页组件的内容不会出现在其他页面上。

这是不使用exact的场景:

主页

地点:/

-----------------
homepage content
-----------------

第二个页面

地点:/第二页

-----------------
homepage content
-----------------
-----------------
second content
-----------------

==========================================

使用准确的:

主页

地点:/

-----------------
homepage content
-----------------

第二个页面

地点:/第二页

-----------------
second content
-----------------