How to use routes with parameters in react router dom - reactjs

Question

I am creating a login in using react on the client and node on the server. From node I make the routes visible to the client, they are used with react router dom. This is my configuration of react router dom:
// React
import { Component, Fragment, Suspense, lazy } from "react";
// Components
import { Loading } from "./Loading";
// Librarys
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
// Layout
const Header = lazy(() => import("./Header"));
const Footer = lazy(() => import("./Footer"));
const PageNotFound = lazy(() => import("./PageNotFound"));
// Pages
const Home = lazy(() => import("./Home"));
const Products = lazy(() =>
import("./Products")
);
const Product = lazy(() =>
import("./Product")
);
// User Pages
const Login = lazy(() => import("./Login"));
const Register = lazy(() => import("./Register"));
class App extends Component {
render() {
return (
<Suspense
fallback={
<Loading />
}
>
<Router>
<Switch>
<Page path="/" component={Home} />
<Page path="/products" component={Products} />
<Page path="/products/:product" component={Product} />
<Page path="/contact" component={Contact} />
<Page path="/admin?login=true" component={Login} />
<Page path="/admin?register=true" component={Register} />
<Route
exact
path="/page-not-found"
component={PageNotFound}
/>
<Redirect to="/page-not-found" />
</Switch>
</Router>
</Suspense>
);
}
}
export default App;
class Page extends Component {
static defaultProps = {
exact: true,
sensitive: true
};
render() {
return (
<Fragment>
<Header />
<Route {...this.props} exact sensitive />
<Footer />
</Fragment>
);
}
}
My problem is in the "Login" and "Register" paths. They have added: "?login=true" and "?register=true". When entering any of those paths it shows me the 404 page. How to solve this? Use routes with parameters.