CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-router
Reacting
Reacting

Reputation: 6133

How can I use React Router to nest some routes? And I want to keep a header component

I have a stepper component at the top and a next/back button at the bottom. All I want is to change the route but I want to keep those 2 components there. Look:

enter image description here

That thing within the red rectangle is what I need to change. I want to the rest just as it is.

This is what I have in the App.js so far:

const App = () => (
  <ReduxProvider store={store}>
    <Router>
      <div className="App">
        <Navbar />

        <div className="App-container">
          <Route exact path="/signup" component={SignupPage} />
          <Route exact path="/startup-application"
            component={StartupApplication}
          />
        </div>
      </div>
    </Router>
  </ReduxProvider>
);

export default App;

Where /startup-application is the route where I want to nest my other routes. The nested routes will be like -> /startup-application/step-one, /startup-application/step-two and so on.

Upvotes: 0

Views: 189

Answers (1)

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2483

You can add the nested Routes inside the component where you want it to render. Here, you want to render nested Routes inside the StartupApplication component. so you can do following

 function StartupApplication({match}) {
      return (
        <div>
          <h2>StartupApplication</h2>
          <ul>
            <li>
              <Link to={`${match.url}/step-one`}>Step One</Link>
            </li>
            <li>
              <Link to={`${match.url}/step-two`}>Step Two</Link>
            </li>
          </ul>
          // adding the nested routes
          <Route path={`${match.path}/:nestedComponent`} component={StepOne} />
          <Route path={`${match.path}/:nestedComponent`} component={StepTwo} />
        </div>
      );
    }

For more information on nested routes, you can go to source.

Upvotes: 1

Related Questions