React Router v6 不适用于 URL Slugs答案

【问题标题】：React Router v6 not working with URL SlugsReact Router v6 不适用于 URL Slugs
【发布时间】：2022-01-02 11:04:09
【问题描述】：

我正在尝试让 react-router-dom 使用一个简单的 url: /user/{name} 但由于某种原因无法让它加载带有名称的 url slug 的页面。

这是我的App功能组件的返回：

    <>
      <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>
    </>

这是用户组件；我的调试 atm 的占位符。

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

当我访问 http://localhost:3000/user/test 时，它会加载 User 组件，但不会加载子组件（Outlet/UserPage 元素）

我尝试了很多组合，但似乎做错了什么，因此非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

在react-router-dom v6 中，Route 组件不再具有render 或component 属性，它们在element 属性上渲染其组件。使用 useParams 挂钩访问路由匹配参数。如果UserPage 是一个不能使用 React hooks 的组件，那么使用包装函数组件来访问路由匹配参数并将其作为 props 传递。

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>
</>

【讨论】：