javascript - 在每个页面上 react 路由器加载路由

Question

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

基本上我有这段代码。我想要的是，当您只转到 / 时，它将呈现主页，但随后添加路径将转到该页面。但是，我有两个问题。首先，由于某种原因，主页在每个页面上都呈现，但也包含路径页面的内容。所以 / 给我家(这是正确的)。 /component 呈现 AnotherComp 组件和主页。我只想让它渲染单个组件。另一个问题是我的 * 路由也在所有页面上呈现。如何才能让 home 仅在 / 上呈现，而 * 仅在路径未知时呈现？

Answer 1

尝试将 exact 添加到路由中。

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

如果你想要一个命中任何未知 url 的路由，你可以使用 switch 语句。

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