Reaccionar Router v6 no trabajar con URL Babosas

Question 1

Estoy tratando de hacer reaccionar-router-dom trabajar con una simple url: /usuario/{nombre} pero por alguna razón no puede llegar a cargar la página con la url slug para el nombre.

Este es el regreso de mi Aplicación la función de componente:

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

Este es el componente de Usuario; un marcador de posición para mi la depuración de la atm.

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

Cuando voy a http://localhost:3000/user/test se carga el User componente pero no a los niños (la Toma de corriente/UserPage elementos)

He probado un montón de combinaciones, pero parecen estar haciendo algo mal, por lo que cualquier ayuda sería muy apreciada. Gracias!

Question 2

En react-router-dom la v6 Route los componentes no tienen render o component props, prestan sus componentes en el element prop. El uso de la useParams gancho para acceder a la ruta partido params. Si UserPage es un componente que no puede utilizar Reaccionar ganchos, a continuación, utilizar una función de contenedor de componentes para acceder a la ruta partido param y pasar como una patena.

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

En react-router-dom la v6 Route los componentes no tienen render o component props, prestan sus componentes en el element prop. El uso de la useParams gancho para acceder a la ruta partido params. Si UserPage es un componente que no puede utilizar Reaccionar ganchos, a continuación, utilizar una función de contenedor de componentes para acceder a la ruta partido param y pasar como una patena.

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

Reaccionar Router v6 no trabajar con URL Babosas

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría