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

【问题标题】：React router loading route on every page在每个页面上反应路由器加载路由
【发布时间】：2017-12-08 16:30:30
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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>

【讨论】：

好的，这解决了家庭问题。但是您对在每个页面上呈现的未找到组件有任何指导吗？
请注意，您必须从“react-router-dom”导入开关。 import { HashRouter, Route, Switch } from 'react-router-dom';