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

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

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

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

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

           }