Javascript 如何在react中从子路由重定向到主路由

我有一个关于dom的问题。在我的

App.js

组件中，我有一些路由，包括：

“/”、“/：userId/profile”、“/chat”、…

。

Profile.js

组件，其地址为

“/：userId/Profile”

。在这里，我有一些路径来呈现一些页面（组件）。在

Profile.js

所有路由的顶部，我设置了

Header.js

组件，该组件包含类似用户名和图片的信息。在

Header.js

组件中，我有一个按钮，我想导航到

“/：userId/create post”

路由和我在

App.js

组件中定义的路由。如何在

App.js

中从嵌套路由重定向到主路由

在

App.js

组件中：

export default function App() {
  return (
    <Router basename="/">
      <Navigation />

      <main className="app">
        <Switch>
          <Route path="/" exact render={() => <Posts />} />
          <Route path="/:userId/profile" exact render={() => <Profile />} />
          <Route path="/chat" exact render={() => <Chat />} />
          <Route path="/suggested" exact render={() => <Suggested />} />
          <Route path="/explore" exact render={() => <Explore />} />
          <Route path="/auth" exact render={() => <Auth />} />

          <Route
            path="/:userId/create-post"
            exact
            render={() => <CreatePost />}
          />

          <Redirect to="/" />
        </Switch>
      </main>
    </Router>
  );
}

const UserProfile = props => {
  return (
    <Section className="section">
      <Router primary={false}>
        <ProfileHeader user={props.user} />
        <ProfileNavigate userId={props.user.userId} />

        <Section className="section">
          <Switch>
            <Route
              path="/:userId/profile/posts"
              exact
              render={() => <ProfilePostsList userPosts={props.userPosts} />}
            />

            <Route
              path="/:userId/profile/saved"
              exact
              render={() => <ProfileSavedList userPosts={props.userPosts} />}
            />

            <Route
              path="/:userId/profile/tagged"
              exact
              render={() => <ProfileTaggedList userPosts={props.userPosts} />}
            />

            <Redirect
              from={`/${props.user.userId}/profile`}
              to={`/${props.user.userId}/profile/posts`}
            />
          </Switch>
        </Section>
      </Router>
    </Section>
  );
};

export default UserProfile;

<Button
  className="weight btn-create"
  onClick={navigateHandler}
>
  Create Post
</Button>

在

Profile Header.js

组件中：

export default function App() {
  return (
    <Router basename="/">
      <Navigation />

      <main className="app">
        <Switch>
          <Route path="/" exact render={() => <Posts />} />
          <Route path="/:userId/profile" exact render={() => <Profile />} />
          <Route path="/chat" exact render={() => <Chat />} />
          <Route path="/suggested" exact render={() => <Suggested />} />
          <Route path="/explore" exact render={() => <Explore />} />
          <Route path="/auth" exact render={() => <Auth />} />

          <Route
            path="/:userId/create-post"
            exact
            render={() => <CreatePost />}
          />

          <Redirect to="/" />
        </Switch>
      </main>
    </Router>
  );
}

const UserProfile = props => {
  return (
    <Section className="section">
      <Router primary={false}>
        <ProfileHeader user={props.user} />
        <ProfileNavigate userId={props.user.userId} />

        <Section className="section">
          <Switch>
            <Route
              path="/:userId/profile/posts"
              exact
              render={() => <ProfilePostsList userPosts={props.userPosts} />}
            />

            <Route
              path="/:userId/profile/saved"
              exact
              render={() => <ProfileSavedList userPosts={props.userPosts} />}
            />

            <Route
              path="/:userId/profile/tagged"
              exact
              render={() => <ProfileTaggedList userPosts={props.userPosts} />}
            />

            <Redirect
              from={`/${props.user.userId}/profile`}
              to={`/${props.user.userId}/profile/posts`}
            />
          </Switch>
        </Section>
      </Router>
    </Section>
  );
};

export default UserProfile;

<Button
  className="weight btn-create"
  onClick={navigateHandler}
>
  Create Post
</Button>

---

所以我猜推送到

`/${props.user.userId}/create post`

不起作用了？看起来第二个

路由器

包装您的

用户配置文件

组件是最近的路由器上下文，但您要到达的路由位于

应用程序

中的

路由器

。移除“嵌套”路由器。是的，我认为你是对的，但是如果我删除

Profile.js

中的嵌套路由器，那里的所有路由都无法正常工作，伙计。你的应用程序中真的只需要一个路由器。如果我也不得不猜测，当您删除嵌套路由器时，它停止工作，因为根路由器只匹配精确路径

“/：userId/profile”

，所以任何带有该路径前缀的子路由都不会匹配。谢谢老兄，我正在努力解决这个问题