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 Dev Tools通知我的内容：

标签的图片有＆＃39; null＆＃39;路线：https://i.stack.imgur.com/ZmWWv.jpg

如果有人可以帮忙解决这个问题，我会深感欣赏 - 我已经挣扎了好几天了！

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

先谢谢你们！

Answer 1

嵌套Route无法相互堆叠。例如，我在屏幕截图中看到您的Dashboard组件与/dashboard匹配。

您可以思考然后，只需将Route或/lead内的/home放在Dashboard组件内。但你不能。

每个Route组件，无论它在树中的位置如何，都需要一条绝对路径。根据Dashboard组件正在渲染的事实来判断，你已经是在/dashboard上，这意味着您固有地无法访问/lead或/home等等。

这意味着您的组件中的Route应为/dashboard/lead，/dashboard/home和/dashboard/contacts。或者，您可以使用this.props.match道具，并执行以下操作：

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

我知道，有时我希望嵌套的Route会自动堆叠！但我可以想象这会给图书馆的开发者带来绝对的麻烦，很可能甚至是很多开发人员使用该库。

React Router-v4中的嵌套<switch>标记返回null

1 个答案: