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

使用精确？

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

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

示例 -> https://stackblitz.com/edit/react-zehsms

Answer 2

你必须使用 excat 标志，并沿着路径向下倾斜。

所以这个交换机的父路由器应该是这样的：

export default class MainRouter extends Component {

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

}

然后子路由器将引用其路由如下：

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

}

您可以在此处了解更多详细信息https://learn.co/lessons/react-router-nested-routes

Answer 3

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

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

现在更改每个路径以在您编写的路径之前使用 match.path 属性查看第一条路线并使用相同的模式更改所有路线您可以在 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>
               }

           }

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

React-router nesting to show different components

javascript

reactjs

react-router

react-router-v4