반응 라우터 v6 작동하지 않는 URL 슬러그와

Question 1

내가 만들려고 반응하-라우터 dom 작업으로 간단한 url:/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 구성 요소는 수 없 이 사용 반응 후크,다음 사용하 래퍼 기능은 구성 요소에 액세스하는 경로 경기 param 및으로 전달 수 있습니다.

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 구성 요소는 수 없 이 사용 반응 후크,다음 사용하 래퍼 기능은 구성 요소에 액세스하는 경로 경기 param 및으로 전달 수 있습니다.

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 슬러그와

질문

최고의 응답

다른 언어로

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

이 카테고리에서 인기

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