How to use routes with parameters in react router dom

Viewed 895

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.

0 Answers
Related