I have an APP using React and Redux, and I wanted to load a NotFound ponent when the user enters an invalid route. I found online a way to solve that problem, that is by putting all the routes inside a switch, including the NotFound ponent.

The problem is that, in my app, I can't put all my routes inside a Switch because There is a single ponent that needs to be stretched to the entire page, while all the other ponents need to be inside a "container". The way I have it below (see the code), the NotFound ponent works for all cases, except when I'm on the "landing" ponent route (where the NotFound ponent always displays).

I tried to put the landing ponent inside the Switch with the "container" div but the app crashes.

Is there any way to solve this? (keeping the landing ponent out of the container, and the other ponents inside)

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Route exact path="/" ponent={Landing} />
            <div className="container">
              <Switch>
                <Route exact path="/register" ponent={Register} />
                <Route exact path="/login" ponent={Login} />
                <Route exact path="/profiles" ponent={Profiles} />
                <Route exact path="/profile/:handle" ponent={Profile} />
                <PrivateRoute exact path="/dashboard" ponent={Dashboard} />
                <PrivateRoute
                  exact
                  path="/create-profile"
                  ponent={CreateProfile}
                />
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  ponent={EditProfile}
                />
                <PrivateRoute
                  exact
                  path="/add-experience"
                  ponent={AddExperience}
                />
                <PrivateRoute
                  exact
                  path="/add-education"
                  ponent={AddEducation}
                />
                <PrivateRoute
                  exact
                  path="/edit-education/:id"
                  ponent={EditEducation}
                />
                <PrivateRoute exact path="/feed" ponent={Posts} />
                <PrivateRoute exact path="/post/:id" ponent={Post} />
                <Route ponent={NotFound}/>
              </Switch>
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

I have an APP using React and Redux, and I wanted to load a NotFound ponent when the user enters an invalid route. I found online a way to solve that problem, that is by putting all the routes inside a switch, including the NotFound ponent.

The problem is that, in my app, I can't put all my routes inside a Switch because There is a single ponent that needs to be stretched to the entire page, while all the other ponents need to be inside a "container". The way I have it below (see the code), the NotFound ponent works for all cases, except when I'm on the "landing" ponent route (where the NotFound ponent always displays).

I tried to put the landing ponent inside the Switch with the "container" div but the app crashes.

Is there any way to solve this? (keeping the landing ponent out of the container, and the other ponents inside)

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Route exact path="/" ponent={Landing} />
            <div className="container">
              <Switch>
                <Route exact path="/register" ponent={Register} />
                <Route exact path="/login" ponent={Login} />
                <Route exact path="/profiles" ponent={Profiles} />
                <Route exact path="/profile/:handle" ponent={Profile} />
                <PrivateRoute exact path="/dashboard" ponent={Dashboard} />
                <PrivateRoute
                  exact
                  path="/create-profile"
                  ponent={CreateProfile}
                />
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  ponent={EditProfile}
                />
                <PrivateRoute
                  exact
                  path="/add-experience"
                  ponent={AddExperience}
                />
                <PrivateRoute
                  exact
                  path="/add-education"
                  ponent={AddEducation}
                />
                <PrivateRoute
                  exact
                  path="/edit-education/:id"
                  ponent={EditEducation}
                />
                <PrivateRoute exact path="/feed" ponent={Posts} />
                <PrivateRoute exact path="/post/:id" ponent={Post} />
                <Route ponent={NotFound}/>
              </Switch>
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Mar 16, 2021 at 16:25 Ajeet Shah 19.9k99 gold badges6464 silver badges104104 bronze badges asked Sep 18, 2018 at 14:31 Lucas NovaesLucas Novaes 12322 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can make a separate router for all other ponents except landing page.

// App.js
import NonLandingPages from './NonLandingPages';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Switch>
                <Route exact path="/" ponent={Landing} />
                <Route ponent={NonLandingPages}/>
            </Switch>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

Separate router for all other pages

// NonLandingPages.js
class NonLandingPages extends Component {
  render() {
    return (
        <div className="container">
            <Switch>
                <Route exact path="/register" ponent={Register} />
                <Route exact path="/login" ponent={Login} />
                <Route exact path="/profiles" ponent={Profiles} />
                <Route exact path="/profile/:handle" ponent={Profile} />
                <PrivateRoute exact path="/dashboard" ponent={Dashboard} />
                <PrivateRoute
                  exact
                  path="/create-profile"
                  ponent={CreateProfile}
                />
                <PrivateRoute
                  exact
                  path="/edit-profile"
                  ponent={EditProfile}
                />
                <PrivateRoute
                  exact
                  path="/add-experience"
                  ponent={AddExperience}
                />
                <PrivateRoute
                  exact
                  path="/add-education"
                  ponent={AddEducation}
                />
                <PrivateRoute
                  exact
                  path="/edit-education/:id"
                  ponent={EditEducation}
                />
                <PrivateRoute exact path="/feed" ponent={Posts} />
                <PrivateRoute exact path="/post/:id" ponent={Post} />
                <Route ponent={NotFound}/>
            </Switch>
        </div>
    );
  }
}