¿Cómo se transfieren los parámetros del enrutador al componente?... Aparece dos veces en el registro de la consola. Primero, inicio de sesión, segundo, cierre de sesión.
No sé por qué aparece dos veces, distingo con precisión los pases por "exactos", pero no sé por qué aparece el cierre de sesión en el registro de la consola cuando escribí url http://localhost:8080/signin .
aplicación.js
import React from "react"; import * as Pages from "./pages"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; const App = () => { return ( <> <Router> <Switch> <Route exact path="/" component={Pages.home} /> <Route exact path={config.url.pathName} component={Pages.auth(config.url.text)} /> <Route exact path="/signout" component={Pages.auth("signout")} /> <Route component={Pages.notfound} /> </Switch> </Router> </> ); }; export default App; page/auth.js import React from "react"; import { page as Page } from "pages"; import { AuthContainer } from "containers"; function auth(type) { **console.log("page auth", type);** <- page auth signin and page auth signout twice console.log! return ( <> <Page title={"login"} /> <AuthContainer type={type} /> </> ); } export default auth;Parece que estás llamando a la función Pages.auth cuando renderizas la aplicación. Debe pasar un componente en lugar de llamarlo. El registro se muestra dos veces porque llamó a la función dos veces en app.js. Para lograr lo que busca, puede usar el useLocation para obtener la ruta en la que se encuentra.
Consulte https://reactrouter.com/web/api/Hooks/uselocation para obtener más información sobre useLocation .
app.js import React from "react"; import * as Pages from "./pages"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; const App = () => { return ( <> <Router> <Switch> <Route exact path="/" component={Pages.home} /> <Route exact path={config.url.pathName} component={Pages.auth} /> <Route exact path="/signout" component={Pages.auth} /> <Route component={Pages.notfound} /> </Switch> </Router> </> ); }; export default App; page/auth.js import React from "react"; import { page as Page } from "pages"; import { AuthContainer } from "containers"; import { useLocation } from "react-router-dom"; function auth() { let location = useLocation(); console.log("location: ", location); return ( <> <Page title={"login"} /> <AuthContainer type={type} /> </> ); } export default auth;