获得params自外部的线路组件作出反应路由器6

Question 1

我已经创建了2件命名的 Layout 和 Homepage. 然后我加入了 Layout 在返回和实现2路线里面有 Homepage 组成部分。现在我试图获得 params 通过 useParams 钩的内部 Layout 组件的话我在的位置 /10. 这可能吗？这是给空白在我身边。

App.js

const App = () => {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Routes>
    </Layout>
  );
}

Layout.js

import { useParams } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params);
  return(
    <div>
      Hello World
    </div>
  );
}

Question 2

Layout 分需要呈现它的 children 所以路线实际上呈现。我试图这虽然而它似乎没有选择的路线参数。对不起，这不是马上清楚为什么在这点。

但

共同模式呈现的布局是为呈现的布局组成的一个途径，并有布局呈现 Outlet 儿童/嵌套的路线呈现出来。

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

路线

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Drew Reese · Answer 1 · 2021-11-23T21:10:32

Layout 分需要呈现它的 children 所以路线实际上呈现。我试图这虽然而它似乎没有选择的路线参数。对不起，这不是马上清楚为什么在这点。

但

共同模式呈现的布局是为呈现的布局组成的一个途径，并有布局呈现 Outlet 儿童/嵌套的路线呈现出来。

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

路线

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

获得params自外部的线路组件作出反应路由器6

的问题

最好的答案

但

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别