React Router v6 URL Sümüklü böceklerle çalışmıyor

Question 1

React-router-dom'un basit bir url ile çalışmasını sağlamaya çalışıyorum: / user / {name} ancak bazı nedenlerden dolayı sayfayı ad için url sümüklü böcek ile yükleyemiyor.

Bu, Uygulama işlev bileşenimin geri dönüşüdür:

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

Bu Kullanıcı bileşenidir; hata ayıklama atm'm için bir yer tutucu.

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

Gittiğimde http://localhost:3000/user/test bu yükler User bileşen ancak alt öğeler (Outlet / UserPage öğeleri)

Birçok kombinasyon denedim ama yanlış bir şey yapıyor gibi görünüyor, bu yüzden herhangi bir yardım çok takdir edilecektir. Teşekkürler!

Question 2

İçinde react-router-dom v6 en Route bileşenler artık yok render veya component sahne, bileşenlerini element destek. Kullan... useParams rota eşleşmesi parametrelerine erişmek için kanca. Eğer UserPage React kancalarını kullanamayan bir bileşendir, daha sonra route match param'a erişmek ve onu bir pervane olarak geçirmek için bir sarmalayıcı işlev bileşeni kullanın.

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

İçinde react-router-dom v6 en Route bileşenler artık yok render veya component sahne, bileşenlerini element destek. Kullan... useParams rota eşleşmesi parametrelerine erişmek için kanca. Eğer UserPage React kancalarını kullanamayan bir bileşendir, daha sonra route match param'a erişmek ve onu bir pervane olarak geçirmek için bir sarmalayıcı işlev bileşeni kullanın.

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

React Router v6 URL Sümüklü böceklerle çalışmıyor

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride