CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
randomname
randomname

Reputation: 159

React-router nesting to show different components

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?

Upvotes: 5

Views: 195

Answers (3)

user8224713
user8224713

Reputation: 41

use exact?

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

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

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

Upvotes: 0

mostafa tourad
mostafa tourad

Reputation: 4388

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

           }

Upvotes: 2

asosnovsky
asosnovsky

Reputation: 2235

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

Upvotes: 0

Related Questions