在反应中设置子路线答案

【问题标题】：Setting child routes in react在反应中设置子路线
【发布时间】：2020-08-02 14:52:25
【问题描述】：

我有一个配置文件组件，它进一步分为配置文件表单和配置文件角色。我已经为这些子组件制作了路线，但它们不起作用。以下是该组件的示例代码。

Profile.js

render();
{
  const profile = {
    padding: '30px',
  };
  return (
    <div
      className="col-md-12 col-sm-12  profile-container bg-gray"
      style={profile}>
      <h3 className="roboto paragraph color-black mgb-60">Profile</h3>
      <Router>
        <Switch>
          <Route exact path="/" component={ProfileForm} />
          <Route path="/profile-form" component={ProfileForm} />
          <Route path="/profile-roles" component={ProfileRoles} />
        </Switch>
      </Router>
    </div>
  );
}

个人资料角色

render();
{
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={RoleLists} />
        <Route path="/list" component={RoleLists} />
        <Route path="/create" component={CreateRole} />
      </Switch>
    </Router>
  );
}

现在我只能看到启动 profile.js 的“h3”标签。路由（配置文件和角色）似乎都没有工作。请帮忙。

【问题讨论】：

标签： reactjs typescript react-native react-router

【解决方案1】：

类似的东西。

个人资料角色

render()
    { 
        const { match: { path } } = this.props;
        return(
            <Router>
                <Switch>
                    <Route exact path={path} component={RoleLists} />
                    <Route path={`${path}/list`} component={RoleLists} />
                    <Route path={`${path}/create`} component={CreateRole} />
                </Switch>
            </Router>
        )
    }

【讨论】：

【解决方案2】：

从“配置文件角色”组件中的道具定义路径后，请确保不要重新声明路由器而只需添加路由。否则您可能会遇到重定向问题。

【讨论】：

【解决方案3】：

我错过了一个小概念。在谷歌上搜索了很多并阅读了很多教程后，我发现我不需要在我的配置文件组件中重新声明路由器。如果我只在 Switch 内部使用 Route，路由效果很好。

这是我的代码。

Profile.js


render()
    {
        const profile={
            padding:"30px"
        }
        return(
            <div className="col-md-12 col-sm-12  profile-container bg-gray" style={profile}>

                <h3 className="roboto paragraph color-black mgb-60">Profile</h3>
                <Switch>
                    <Route path="/dashboard/profile" exact component={ProfileForm} />
                    <Route path="/dashboard/profile/view" component={ProfileForm} />
                    <Route path="/dashboard/profile/roles" component={ProfileRoles} />
                </Switch>

            </div>

        )
    }

个人资料角色


render()
    {
        return(
                <Switch>
                <Route exact path="/dashboard/profile/roles" component={RoleLists} />
                    <Route path="/dashboard/profile/roles/list" component={RoleLists} />
                    <Route path="/dashboard/profile/roles/create" component={CreateRole} />
                </Switch>
        )
    }

【讨论】：