react-router-dom v4不渲染页面加载组件

Question

所以基本上我有一个导航栏，可以在路线之间切换。当页面加载时，默认情况下会转到/home，但实际上不会呈现所提供的应用程序组件。我必须单击将您带到/主页的按钮才能渲染此内容。

我使用Redux的反应路由器。

这是我的浏览器路由器：

<Provider store = {store}>
    <BrowserRouter>
      <div>
        <Header />
        <Route exact path = "/home" component={App}> </Route>
        <Switch>
          <Route  path = "/about" render = {() => <AboutUs />}></Route>
          <Route  path = "/contact" render = {() => <Contact />}></Route>
          <Route  path = "/services" render = {() => <Services />}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

有什么建议吗？

Answer 1

您需要将/home放入

<Route exact path = "/home" component={App}> </Route>

表示把上面一行代码放在里面

<Switch>
      <Route exact path = "/home" component={App}> </Route>
      <Route  path = "/about" render = {() => <AboutUs />}></Route>
      <Route  path = "/contact" render = {() => <Contact />}></Route>
      <Route  path = "/services" render = {() => <Services />}></Route>
</Switch>

Answer 2

把你的/home路由放在Switch与所有其他路由：

<Provider store = {store}>
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route exact path = "/home" component={App}> </Route>
          <Route  path = "/about" render = {() => <AboutUs />}></Route>
          <Route  path = "/contact" render = {() => <Contact />}></Route>
          <Route  path = "/services" render = {() => <Services />}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

Answer 3

默认路由是/而不是/home。您需要设置重定向。