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

           }

Answer 2

使用确切的？

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

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

示例 - ＆gt; https://stackblitz.com/edit/react-zehsms

Answer 3

你必须使用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

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

3 个答案: