Question

我正在尝试构建一个React应用，其主页位于"/"，而其他页面位于"/:pagename"，但是当我尝试使用<Switch>进行操作时，我得到了内容主页上的内容以及我在"/:pagename"上的其他页面的内容。我对React或BrowserRouter不太熟悉，但是我认为这是因为"/:pagename"从技术上来说也是"/"。我该如何使我的主页仅在基本URL上未附加任何内容时显示？

class App extends Component {
render() {
return (
  <body>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <Switch>
      <Route path="/" component={HomePage}/>
      <Route path="/photography" component={PhotographyPage}/>
    </Switch>
  </body>
);
}
}

Answer 1

为您的exact路径使用/道具。

<BrowserRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/photography" component={PhotographyPage} />
      </Switch>
</BrowserRouter>

您正在解释与您的代码不同的情况。在您的代码中，您尝试在/photography路径上呈现其他组件。但是，在您的解释中，您要说的是要使用带有URL参数的路径。无论哪种情况，您都需要exact道具，但情况有所不同。

exact属性在此告诉路由器仅匹配此路径。因此，如果您的路径为HomePage，它将完全呈现/组件。如果您不使用exact属性，则Router每次看到Homepage路径时都会尝试渲染/。因此，当您尝试加载/photography时，它首先会看到/，渲染Homepage，然后它会看到您的完整路径并渲染PhotographyPage。

当然，您可以在official documentation中找到更多信息。

如何使用React BrowserRouter在“ /”处仅显示页面

1 个答案: