을 얻을라에서의 외부로 구성 요소에 대응 라우터 6

Question 1

내가 만든 2 구성요소라는 이름 Layout 고 Homepage. 다음 추가 Layout 에 반환하고 구현하 2 와 함께 내부에 경로 Homepage 구성 요소입니다. 지금을 얻기 위해 노력하고있어 params by 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 그래서 경로를 실제로 렌더링됩니다. 이지만 그것은 것 같지 않았어요 선택하는 경로에라. Sorry,그렇지 않은 즉시 취소는 이유로 이 지점입니다.

지

일반적인 패턴을 렌더링하기 위한 레이아웃은 레이아웃을 렌더링하는 구성요소로 경로 및 레이아웃을 가지고 있는 렌더링 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 그래서 경로를 실제로 렌더링됩니다. 이지만 그것은 것 같지 않았어요 선택하는 경로에라. Sorry,그렇지 않은 즉시 취소는 이유로 이 지점입니다.

지

일반적인 패턴을 렌더링하기 위한 레이아웃은 레이아웃을 렌더링하는 구성요소로 경로 및 레이아웃을 가지고 있는 렌더링 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>

을 얻을라에서의 외부로 구성 요소에 대응 라우터 6

질문

최고의 응답

지

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리