React Router-v4 中的嵌套 <Switch/> 标签返回 null

Question

所以，我一直在努力让嵌套路由在我的应用程序中工作。 出于某种原因，即使定义了所有路由，也会返回 null。

    import React, {Component} from 'react';
    import tabData from '../../data/tabData';
    import Tab from './Tab';
    import Homepage from '../Homepage/Homepage';
    import contactContainer from '../contactContainer/contactContainer';
    import leadContainer from '../leadContainer/leadContainer';
    import { Switch, Route, Redirect, Link } from 'react-router-dom';
    import './Dashboard.css';

    class Dashboard extends Component{
      constructor(props){
        super(props);

        this.state = {
          tabs: tabData,
          page:''
        }
      }
      render(){
        return(
          <div className="row navigation">
            <div className="col-md-3 left-nav">
              <div className="user-details">
                <img src="https://image.flaticon.com/icons/png/128/149/149071.png"/>
                <h3>John Doe</h3>
              </div>
              <Tab tabs={this.state.tabs}/>
            </div>
            <div className="col-md-9">
              <Switch>
                <Route exact path="/lead" component={leadContainer}/>
                <Route path="/home" component={Homepage}/>
                <Route path="/contacts" component={contactContainer}/>
              </Switch>
            </div>
          </div>
        )
      }
    }

    export default Dashboard;

以下是 React 开发工具通知我的内容：

具有“空”路由的标签图片：https://i.stack.imgur.com/ZmWWv.jpg

如果有人可以帮助解决这个问题，我将不胜感激 - 我已经为此苦苦挣扎了好几天！

我发现这篇文章似乎解决了同样的问题，但还没有解决方案：<Switch> component matching null value in react-router-4

提前谢谢各位！

Answer 1

嵌套的Routes 不能通过相互堆叠来工作。例如，我在您的屏幕截图中看到您有一个与/dashboard 匹配的Dashboard 组件。

您会认为您可以，然后将与/lead 或/home 匹配的Routes 放入Dashboard 组件中...但您不能。

每个Route 组件，无论它在树中的位置如何，都需要一个绝对路径。 从Dashboard 组件正在渲染的事实来看，您已经在/dashboard ，这意味着你天生就不能在/lead或/home等上。

这意味着您的组件中的Routes 应该是/dashboard/lead、/dashboard/home 和/dashboard/contacts。或者，您可以使用 this.props.match 属性，并执行以下操作：

<Route path={this.props.match.path + "/home"} component={Homepage}/>

我知道，有时我希望嵌套的Routes 也会自动堆叠！但我可以想象这会给库的开发人员带来绝对的头痛，很可能甚至是许多使用该库的开发人员。