Маршрутизатор React v6 не работает с пулями URL-адресов

Question 1

Я пытаюсь заставить react-router-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>
    </>

Это пользовательский компонент; заполнитель для моего отладочного atm.

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

Когда я иду в http://localhost:3000/user/test он загружает User компонент, но не дочерние элементы (элементы розетки/страницы пользователя)

Я перепробовал множество комбинаций, но, похоже, делаю что-то не так, так что любая помощь будет очень признательна. Спасибо!

Question 2

В react-router-dom v6 в Route компоненты больше не имеют render или component реквизит, они отображают свои компоненты на element подпирать. Используйте useParams крюк для доступа к параметрам соответствия маршрута. Если UserPage это компонент, который не может использовать крючки React, затем используйте компонент функции-оболочки для доступа к параметру соответствия маршрута и передачи его в качестве опоры.

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 это компонент, который не может использовать крючки React, затем используйте компонент функции-оболочки для доступа к параметру соответствия маршрута и передачи его в качестве опоры.

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 v6 не работает с пулями URL-адресов

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории