Javascript 具有相同父链接的多个交换机

沙箱

我是一个新的反应者，我正在尝试以下路线；我正在

应用程序中使用开关

组件

class Panel extends Component {
  state = {};

  render() {
    return (
      <div id="panel" className="page-wrapper">
        <Container className="page-container" fluid>
          <Row>
            <Col sm={2} className="column">
              <div className="list-group">
                <NavLink to="/panel/dashboard" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Dashboard
                </NavLink>
                <NavLink to="/panel/accounts" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Accounts
                </NavLink>
              </div>
            </Col>
            <Col sm={10} className="column">
              <Card className="w-100">
                <Switch>
                  <Route path="/panel/dashboard">
                    <h1>Dashboard</h1>
                  </Route>
                  <Route path="/panel/accounts">
                    <h1>Accounts</h1>
                  </Route>
                </Switch>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default withRouter(Panel);

/验证
/面板/仪表板
/小组/帐目

在这种情况下，到

/panel/

的任何路由都是从

面板

组件加载的。我想在这里处理

仪表板

和

帐户

的任何进一步路由。但是，现在发生的情况是，当用户单击从

面板

组件切换导航时，该组件不会更新（url会更新）。当然，每当我刷新URL时，它都会呈现

示例

代码
App.jsx

类应用程序扩展组件{
状态={
重定向：null，
错误：{}，
};
render（）{
返回(
this.handleLogin（event）}/>}
/>
{this.state.redirect？：null}
);
}
{/*为了清晰起见，省略了一些函数。*/}
}
导出默认应用程序；

Panel.jsx

class Panel extends Component {
  state = {};

  render() {
    return (
      <div id="panel" className="page-wrapper">
        <Container className="page-container" fluid>
          <Row>
            <Col sm={2} className="column">
              <div className="list-group">
                <NavLink to="/panel/dashboard" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Dashboard
                </NavLink>
                <NavLink to="/panel/accounts" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Accounts
                </NavLink>
              </div>
            </Col>
            <Col sm={10} className="column">
              <Card className="w-100">
                <Switch>
                  <Route path="/panel/dashboard">
                    <h1>Dashboard</h1>
                  </Route>
                  <Route path="/panel/accounts">
                    <h1>Accounts</h1>
                  </Route>
                </Switch>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Panel;

类面板扩展组件{
状态={}；
render（）{
返回(
仪表板
账户
仪表板
账户
);
}
}
导出默认面板；

我在

面板

组件中有另一个开关，因此我不必重新加载侧栏，并且可以根据用户的路径加载适当的组件（这样做是否有任何错误，或者通常是更好的方法）

摘要
因此，问题是导航到/panel并单击导航栏时，组件没有加载

---

编辑：请原谅我在代码中的一些东西。我喜欢在编写代码时显得急躁。

您的面板组件需要接收路由器道具，您可以使用路由器

或将路由器道具从ProtectedRoute传递到渲染组件

class Panel extends Component {
  state = {};

  render() {
    return (
      <div id="panel" className="page-wrapper">
        <Container className="page-container" fluid>
          <Row>
            <Col sm={2} className="column">
              <div className="list-group">
                <NavLink to="/panel/dashboard" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Dashboard
                </NavLink>
                <NavLink to="/panel/accounts" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Accounts
                </NavLink>
              </div>
            </Col>
            <Col sm={10} className="column">
              <Card className="w-100">
                <Switch>
                  <Route path="/panel/dashboard">
                    <h1>Dashboard</h1>
                  </Route>
                  <Route path="/panel/accounts">
                    <h1>Accounts</h1>
                  </Route>
                </Switch>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default withRouter(Panel);

类面板扩展组件{
状态={}；
render（）{
返回(
仪表板
账户
仪表板
账户
);
}
}
使用路由器（面板）导出默认值；
您的面板组件需要接收路由器道具，您可以对路由器使用
，
或将路由器道具从ProtectedRoute传递到渲染组件

class Panel extends Component {
  state = {};

  render() {
    return (
      <div id="panel" className="page-wrapper">
        <Container className="page-container" fluid>
          <Row>
            <Col sm={2} className="column">
              <div className="list-group">
                <NavLink to="/panel/dashboard" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Dashboard
                </NavLink>
                <NavLink to="/panel/accounts" exact className="list-group-item list-group-item-action" activeClassName="active">
                  Accounts
                </NavLink>
              </div>
            </Col>
            <Col sm={10} className="column">
              <Card className="w-100">
                <Switch>
                  <Route path="/panel/dashboard">
                    <h1>Dashboard</h1>
                  </Route>
                  <Route path="/panel/accounts">
                    <h1>Accounts</h1>
                  </Route>
                </Switch>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default withRouter(Panel);

类面板扩展组件{
状态={}；
render（）{
返回(
仪表板
账户
仪表板
账户
);
}
}
使用路由器（面板）导出默认值；
我将withRouter添加到我的应用程序组件和面板组件中。然而，我仍然有同样的问题。另外，您能否澄清“将路由器道具从ProtectedRoute传递到渲染组件”是什么意思？您能否从NavLink中删除确切的道具并重试。因为如果你用withRouter包装面板组件，它应该可以工作，我不确定我在这里遗漏了什么；好的，你能用你的问题创建一个代码沙盒演示吗。我会努力修复它的，哇，这一整天都浪费在几个角色上了。。现在可以了。谢谢！我将withRouter添加到我的应用程序组件和面板组件中。然而，我仍然有同样的问题。另外，您能否澄清“将路由器道具从ProtectedRoute传递到渲染组件”是什么意思？您能否从NavLink中删除确切的道具并重试。因为如果你用withRouter包装面板组件，它应该可以工作，我不确定我在这里遗漏了什么；好的，你能用你的问题创建一个代码沙盒演示吗。我会努力修复它的，哇，这一整天都浪费在几个角色上了。。现在可以了。谢谢！