Obter parâmetros de fora da rota componente de Reagir Router 6

Question 1

Eu criei 2 componentes do chamado Layout e Homepage. Então eu adicionei Layout no retorno e implementar 2 rota com Homepage componente. Agora estou tentando obter params por useParams gancho dentro Layout componente, enquanto eu estou no local de /10. É possível? Ele está dando em branco no meu lado.

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 componente necessita para tornar o seu children assim, as rotas são efetivamente prestados. Eu tentei isso, porém, não parecem pegar na rota params. Desculpe, não é imediatamente claro por que razão neste ponto.

MAS

O padrão comum para o processamento de layouts é para compor o layout do componente em uma rota e ter a disposição de prestar Outlet para seus filhos/rotas aninhadas para ser renderizada no.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Rotas

<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 componente necessita para tornar o seu children assim, as rotas são efetivamente prestados. Eu tentei isso, porém, não parecem pegar na rota params. Desculpe, não é imediatamente claro por que razão neste ponto.

MAS

O padrão comum para o processamento de layouts é para compor o layout do componente em uma rota e ter a disposição de prestar Outlet para seus filhos/rotas aninhadas para ser renderizada no.

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

Rotas

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Obter parâmetros de fora da rota componente de Reagir Router 6

Pergunta

Melhor resposta

MAS

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria