React-router-dom v4 在頁面加載時不呈現組件

Question

所以基本上我有一個在路由之間切換的導航欄。 當頁面加載時，默認情況下它會轉到 /home 但實際上並不呈現它所提供的 App 組件。 我必須單擊將您帶到 /home 的按鈕才能呈現它。

我在 Redux 中使用 react-router-dom。

這是我的 BrowserRouter：

<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="/" render={() => ( <Route exact path="/home" component={App} /> )} />

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放在<Switch>里面

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

意味着將上面的代碼放在<Switch>例如：-

<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>