React-router嵌套以显示不同的组件

Question

在我的App.js我有以下路径:

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

注册屏幕组件是:

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

}

我想要实现的目标如下:

前往当/register该RegistrationChooser部件被装载时,与来访当/register/bookLover所述BookLoverRegistration组件被示出与RegistrationChooser分量是隐藏的(不再示出).

我怎样才能做到这一点？

Answer 1

您需要像这样使用match.path属性 **RegistrationScreen ** 组件

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

现在更改每个路径以在您编写的路径之前使用match.path属性查看第一条路线并使用相同的模式更改所有路线，您可以在此链接中找到更多信息

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

           }