React-router-dom v4 не рендерит компонент при загрузке страницы

Question

Так что в основном у меня есть навигационная панель, которая переключается между маршрутами. Когда страница загружается, по умолчанию она переходит в / home, но фактически не отображает компонент приложения, который ей дается. Я должен нажать на кнопку, которая приводит вас в / домой, чтобы сделать это.

Я использую React-Router-Dom с Redux.

Вот мой 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 маршрут в 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 2

Маршрут по умолчанию /, а не /home. Вам необходимо настроить перенаправление.

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