Question

<HashRouter>
        <div>
          <Route path={"/"} component={Home} />
          <Route path={"/component"} component={AnotherComp} />
          <Route path={"*"} component={NotFound} />
        </div>
      </HashRouter>

基本上我有这个代码。而我想要的是，当你转到/时，它将呈现主页，但随后添加路径将转到该页面。但是，我有两个问题。首先，由于某种原因，主页在每个页面上呈现，但也具有路径页面的内容。所以/让我回家（这是正确的）。 /component呈现AnotherComp组件和主页。我只是想让它渲染单个组件。另一个问题是我的*路由也在所有页面上呈现。我怎样才能获得它所以只能在/上呈现，*仅在路径未知时呈现？

Answer 1

尝试将exact添加到路线中。

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

如果你想要一个在任何未知网址上获得命中的路由，你可以使用switch语句。

<HashRouter>
    <div>
        <Switch>
            <Route exact path={"/"} component={Home} />
            <Route exact path={"/component"} component={AnotherComp} />
            <Route path={"*"} component={NotFound} />
        </Switch>
    </div>
</HashRouter>

在每个页面上反应路由器加载路由

1 个答案: