How do you transfer parameters from the router to the component?...
It appears twice in the console log.
First, signin, second, signout.
I don't know why it comes out twice, I'm accurately distinguishing passes by "exact ", but I don't know why signout appears in the console log when I typed url http://localhost:8080/signin.
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(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;
Looks like your calling the Pages.auth function when rendering App. You should pass a component rather than call it. The log is showing twice because you have called the function twice in app.js. To achieve what you're after you can use the useLocation hook to get the route you're on.
See https://reactrouter.com/web/api/Hooks/uselocation for more info on 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;