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

1 Answer 1

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>
    );
  }
}