究竟什么是<switch>用于反应路由器? [英] What exactly is <switch> used for in React Router?

问题描述

我是 React 学习的新手，正在尝试使用 react-router-dom 构建一个应用程序.当我遇到术语交换机"时，我能够实现基本路由.任何人都可以用我们使用 switch 的用例示例解释我，它的用途是什么?

I am new to React learning , and was trying to build an app using react-router-dom. I was able to implement basic routing when I came across the term 'switch'. Can anyone please explain me with a use-case example where we use switch and what is its use?

推荐答案

由于您是新手，所以我将花更多时间用示例进行解释，并添加一些您可能希望方便使用的相关内容.

Since you are new am going to take a bit more time to explain with examples and also add some few things about it you may want to have handy.

就像 Iddler 所说的那样，Switch 或多或少类似于任何其他语言中的Switch case"条件，但通常以它找到的第一个匹配项结束.

So like Iddler said, Switch is more or less like the "Switch case" condition in any other languages but usually ends with the first match it finds.

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

这是其最基本用途的一个示例.Switch 确定块或条件的开始和结束.每个 Route 检查当前路径.假设我们正在研究www.test.com".所有www.test.com"都是根/".因此 Route 检查根之后的路径.所以如果你有www.test.com/home"，/home"在根之后，所以Home"组件将在我们上面的例子中加载，如果你有www.test.com/about"，关于"组件已加载.

That is an example of its most basic use. Switch determines the start and end of the block or condition. Each Route checks for the current path. supposing we were working on "www.test.com". All of "www.test.com" is the root "/". So the Route checks for the path after the root. so if you had "www.test.com/home", "/home" comes after the root so the "Home" component will be loaded in our example above and if you had "www.test.com/about" the "About" component is loaded.

请注意，您可以使用任何名称.组件和路径不必相同.

Be mindful that you can use any names. the components and paths do not need to be the same.

在某些情况下，您可能希望使用 exact 来匹配精确路径.当您有类似的路径时，这很有用.例如/shop"和/shop/shoes".使用 exact 确保 Switch 匹配精确的路径，而不仅仅是第一个.

There are also cases when you might want to use exact to match an exact path. this is useful when you have similar paths. eg "/shop" and "/shop/shoes". using exact ensures Switch matches exact paths and not just the first.

例如:

<Switch>
    <Route exact path="/shop" component={Shop} />
    <Route exact path="shop/shoes" component="{Shoes} />
</Switch>

您也可以使用 而不使用 .

You can also use <Route... /> without the <Switch>.

例如:

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

与直接加载组件不同，直接加载组件就像 <Home/> 路由器使用 URL.

so unlike direct component loads where you just load a component like <Home /> Routers work with the URLs.

最后，<Route.../> 路径可以使用 url 数组来加载相同的组件.

Lastly, the <Route... /> path can take arrays of url to load same component.

例如:

<Switch>
    <Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
    <Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>

我希望这会有所帮助.如果您需要任何形式的说明，请告诉我.:)

I hope this helps. Let me know if you need clarifications of any sort. :)

更新:

您不需要总是以相同的格式编写路由器.以下是您可以使用的另一种格式；

You are not required to write Routers in this same format always. below is another format you could use;

<Router>
    <Switch>
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
    </Switch>
</Router>

现在有像 am in 这样的实例，您希望能够处理输入错误 URL 时显示的内容.就像一个 404page.您可以在没有路径的情况下使用 Router.所以就像一个普通的 switch 语句，它成为你的默认值.

There are instances like am in now where you want to be able to handle what shows when a wrong URL is entered. like a 404page. you could use Router without a path. so like a regular switch statement, that becomes your default.

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

这篇关于究竟什么是<switch>用于反应路由器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！