React-router-dom v4 not rendering component on page load

Question

So basically I have a navbar that switches between routes. When the page loads, it goes to /home by default but doesn't actually render the App component it's being given. I have to click on the button that brings you to /home in order to render this.

I'm using react-router-dom with Redux.

Here's my 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>

Any advice?

Post the full component code. How is App imported? What does `App.js` look like? — Chase DeAnda, Jun 27 '18 at 18:32

score 0 · Answer 1 · answered Jun 27 '18 at 17:47

0

The default route is / not /home. You need to setup a redirect.

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

answered Jun 27 '18 at 17:47

Dávid Szabó

2,119
1
12
24

1

OP says `When the page loads, it goes to /home by default ` – Chase DeAnda Jun 27 '18 at 17:47

score 0 · Answer 2 · answered Jun 27 '18 at 17:47

Put your /home route in the Switch with all the other routes:

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

That makes sense, but App still doesn't render on load – Terry Jun 27 '18 at 17:57 — Terry, Jun 27 '18 at 17:57

score 0 · Answer 3 · answered Nov 12 '19 at 06:24

You need to put /home inside <Switch>

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

Means put above line of code inside <Switch> ex:-

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

React-router-dom v4 not rendering component on page load

3 Answers3