React-router nesting to show different components

Question

In my App.js I have the following path:

<Route path="/register" component={RegistrationScreen} />

The registration screen component is:

import React, { Component } from 'react'
import { Route, Switch } from 'react-router';
import RegistrationChooser from './RegistrationChooser';
import BookLoverRegistration from './BookLoverRegistration';
import BookLoverProRegistration from './BookLoverProRegistration';
import PublisherRegistration from './PublisherRegistration';
import LiteraryAgentRegistration from './LiteraryAgentRegistration';

export default class RegistrationScreen extends Component {

    render() {
        return <div>
            <Switch>
                <Route path="/" component={RegistrationChooser} />
                <Route path="/bookLover" component={BookLoverRegistration} />
                <Route path="/bookLoverPro" component={BookLoverProRegistration} />
                <Route path="/publisher" component={PublisherRegistration} />
                <Route path="/literaryAgent" component={LiteraryAgentRegistration} />
            </Switch>
        </div>
    }

}

What i want to achieve is the following:

When visiting /register the RegistrationChooser component is loaded, and when visiting /register/bookLover the BookLoverRegistration component is shown and the RegistrationChooser component is hidden(not showing anymore).

How can I achieve this?

Answer 1

You need to use the match.path property **RegistrationScreen ** component like this

       <Route path=path={`${props.match.path}/`} component=
             {RegistrationChooser} 
                                                          />

Now change every path to use the match.path property before the path you wrote look at the first route and change ever route using the same pattern you can find more in this link

React Router Api match

export default class RegistrationScreen extends Component {

constructor(props){
      super(props) ;
  }     
render() {
    return <div>
        <Switch>
             <Route path={`${props.match.path}/`} component={RegistrationChooser} />
             <Route path={`${props.match.path}/bookLover`} component=
              {BookLoverRegistration} />
             <Route path={`${props.match.path}/bookLoverPro`} component=
              {BookLoverProRegistration} />
              <Route path="/publisher" component={PublisherRegistration} />
              <Route path="/literaryAgent" component=
               {LiteraryAgentRegistration} 
           />
              </Switch>
           </div>
               }

           }

Answer 2

use exact?

<Route exact path="/bookLover" component={BookLoverRegistration} />

https://reacttraining.com/react-router/web/api/Route

example -> https://stackblitz.com/edit/react-zehsms

Answer 3

You have to use the excat flag, and trickle down the path.

So the parent router of this switch should be as follows:

export default class MainRouter extends Component {

    render() {
       return <div>
            <Switch>
                <Route path="/register" component={RegistrationScreen} />
            </Switch>
        </div>
    }

}

and then the child router would reference its route as follows:

export default class RegistrationScreen extends Component {

    render() {
        const { url } = this.props.match
        return <div>
            <Switch>
                <Route path={url} exact component={RegistrationChooser} />
                <Route path={`${url}/bookLover`} exact component={BookLoverRegistration} />
                <Route path={`${url}/bookLoverPro`} exact component={BookLoverProRegistration} />
                <Route path={`${url}/publisher`} exact component={PublisherRegistration} />
                <Route path={`${url}/literaryAgent`} exact component={LiteraryAgentRegistration} />
            </Switch>
        </div>
    }

}

You can get more detail in here https://learn.co/lessons/react-router-nested-routes