Deploying a React-router to display various components

Question

In my App.js , I have the following path:

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

Registration screen component:

 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:

When you visit /register RegistrationChooser component is loaded, and when you visit /register/bookLover component is BookLoverRegistration , and the RegistrationChooser component is hidden (no longer displayed).

How can i achieve this?

Answer 1

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

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

Now change each path to use the match.path property before you write look at the first route and change the route using the same template you can find more in this link

Interact with Router Api

 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 accurate?

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

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

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

Answer 3

You must use the excat flag and seep along the way.

Thus, 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 will refer to 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> } } 

Here you can get more information https://learn.co/lessons/react-router-nested-routes