反应路由器v6工作不与URL蛞蝓

Question 1

我试图让作出反应路由器-dom工作的一个简单的网址：http：//user/{名}但由于某些原因不能让它加载网页与url弹头的名称。

这是返回我的应用程序的功能组件：

    <>
      <MainNavBar navigation={navigation} />
      <Routes>
        <Route index={true} element={<Home />} exact />
        <Route path="user" element={<User />} exact>
          <Route
            path=":name"
            render={
              ({ match: { params: { name } } }) => {
                console.log(name);
                console.log("test2");
                return (<UserPage
                  userName={name}
                />);
              }}
          />
        </Route>
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>

这是用户部件；占位对我的调试自动取款机。

const User = () => (
  <div>
    <header className="App-header">
      <Outlet />
    </header>
  </div>
);

当我去到http://localhost:3000/user/test 它加载 User 组件，但没有儿童(出口/UserPage元)

我已经试过了大量的组合，但似乎在做的事情是错误的，因此任何帮助将非常赞赏。谢谢！

Question 2

在 react-router-dom v6的 Route 组成不再有 render 或 component 道具，他们使他们的组件 element 道具。使用 useParams 钩的访问路线匹配参数。如果 UserPage 是一个组件， 可以不 使用作出反应挂钩，然后使用包装的功能组件的访问路线匹配参数，并通过它作为一个支柱。

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

Drew Reese · Answer 1 · 2021-11-24T01:05:35

在 react-router-dom v6的 Route 组成不再有 render 或 component 道具，他们使他们的组件 element 道具。使用 useParams 钩的访问路线匹配参数。如果 UserPage 是一个组件， 可以不 使用作出反应挂钩，然后使用包装的功能组件的访问路线匹配参数，并通过它作为一个支柱。

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

反应路由器v6工作不与URL蛞蝓

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别