反应路由器开关和确切路径 [英] React Router Switch and exact path

问题描述

我已经阅读了关于反应路由器开关

我理解关于 Switch 和 Route 的定义

但还是有些看不懂

如果我只想选择一个 Route 来渲染，我们可以像这样使用 Switch

<开关><路由精确路径="/" component={Home}/><Route path="/a" component={A}/><Route path="/b" component={B}/></开关>

我不明白的一点是我可以在没有开关的情况下获得相同的效果

 <路由精确路径="/" component={Home}/><Route path="/a" component={A}/><Route path="/b" component={B}/>

那么我们为什么要使用 Switch 呢?我们什么时候需要使用 Switch?

<小时>

我发现了一个需要使用Switch的情况

如果我想在没有路径匹配时渲染特定组件

我们需要像这样将Route包裹在Switch中

<开关><路由精确路径="/" component={Home}/><Route path="/a" component={A}/><Route path="/b" component={B}/><路由组件={SpecificComponent}/></开关>

我说得对吗?

解决方案

虽然在您的情况下，您可以使用 exact 获得相同的效果，但情况并非总是如此.但是，如果您的路线之一包含嵌套路线，如果您在顶级有确切的路线，则无法使用嵌套路线.

Switch 在上述情况下起到了作用，因为它只呈现第一个匹配

例如

说 Home 路线包含嵌套的路线，如

const Home = (props) =>(<div><Route path="/dashboard" component={Dashboard}/><Route path="/layout" component={Layout}/>

)

所以现在如果你写

<路由精确路径="/" component={Home}/>

以及当您访问 /dashboard 时.该 Dashboard 组件无法呈现，因为没有 Route 与顶级的 /dashboard 匹配.

为了使示例正确运行，您可以使用 Switch 并重新排序路由，以便作为其他路径前缀的路径在末尾

<开关><Route path="/a" component={A}/><Route path="/b" component={B}/><Route path="/" component={Home}/></开关>

I have read this document about react-router Switch

I understand the definition about Switch and Route

But still couldn't understand some points

If I want to pick only one Route to render we use Switch like this

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

The point I can't understand is I can get same effect without Switch

 <Route exact path="/" component={Home} />
 <Route path="/a" component={A} />
 <Route path="/b" component={B} />

So why do we use Switch ? When do we need to use Switch?

---

I found a situation that need to use Switch

If I want to render a specific component when no path match

we need to wrap Route in Switch like this

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route component={SpecificComponent} />
</Switch>

Am I right ?

解决方案

Although in your case you can get the same effect using exact but it may not always be the case. However in cases where one of your Route contains nested route, if you have exact Route at the top level, you cannot make use of the nested Routes.

Switch in the above case serves the purpose since it renders the first match only

For example,

Say Home route contains nested Routes like

const Home = (props) => (
     <div>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/layout" component={Layout}/>
     </div>
)

So now if you write

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

and when you visit /dashboard. That Dashboard component cannot be rendered since no Route matches with /dashboard at the top level.

In order to make the example run correctly, you can make use of Switch and reorder the routes so that the paths that are prefixes to other paths are at the end

<Switch>
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route path="/" component={Home} />
</Switch>

这篇关于反应路由器开关和确切路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！