Reactjs Router version 5

Question

Using react-router@5 with class component with router match.

import React, { lazy } from "react";
import { Router, Switch, Route } from "react-router-dom";
import { history } from "./history";
import Header from "../src/assests/components/header";
import Footer from "../src/assests/components/Footer";

const Routers = [
  { path: '/', component: "./views/home", exact: true },

  { path: '/login',                                    component: "./views/login", fullLayout: true, hideFooter: true },
  { path: '/register',                                 component: "./views/login", fullLayout: true, hideFooter: true },
  { path: '/mutual-fund/deskpay',                      component: "./views/deskpay", fullLayout: true, hideFooter: true },
  { path: '/calculator/sip-calculator',                component: "./views/calculator/sip_calculator.js" },
  { path: '/calculator/lumpsum-calculator',            component: "./views/calculator/lumpsum_calculator.js" },
  { path: '/calculator/sip-reverse-calculator',        component: "./views/calculator/sip_reverse_calculator.js" },
  { path: '/calculator/cagr-calculator',               component: "./views/calculator/cagr-calculator.js" },
  { path: '/calculator/xirr-mutual-fund-calculator',   component: "./views/calculator/xirr-calculator" },
  { path: '/calculator/exit-load-calculator',          component: "./views/calculator/exit-load-calculator" },
  { path: '/calculator/reverse-lumpsum-calculator',    component: "./views/calculator/lumpsum-reverse-calculator" },
  { path: '/calculator/stepup-sip-calculator',         component: "./views/calculator/sip-stepup-calculator" },
  { path: '/calculator/sip-calculator-with-inflation', component: "./views/calculator/sip-calculator-with-inflanation.js" },
  { path: '/calculator/capital-gain-calculator',       component: "./views/calculator/capital-gain-calculator" },
  { path: '/calculator',                               component: "./views/calculator/index.js" },
  { path: '/calculator/:amcName',                      component: "./views/amc-calculator" },
  { path: '*',                                         component: "./views/error/404" },
  { path: '/500',                                      component: "./views/error/500" },
]

class AppRouter extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          {Routers.map(({ path, component: C, fullLayout, hideFooter, exact, key }) => {
            var Component = lazy(() => import(`${C}`))
            return (
              <Route
                key={key}
                path={path}
                exact={exact}
                render={(props) => {
                  console.log(props)
                  return (
                    <React.Fragment>
                      {fullLayout ? "" : <Header />}
                      <Component {...props}/> 
                      {hideFooter ? "" : <Footer/>}
                    </React.Fragment>
                  );
                }}
              />
            )
          })}
        </Switch>
      </Router>
    );
  }
}

export default AppRouter;

Actually this is my code when I change place { path: '/calculator/:amcName', component: "./views/amc-calculator" ,}, from json to set before sip calculator it doesn't render remaining calculator.

Answer 1

when I change place { path: '/calculator/:amcName', component: "./views/amc-calculator" ,}, from json to set before sip calculator it doesn't render remaining calculator.

If I'm understanding your comment/question correctly here you are asking about why placing the "/calculator/:amcName" route before the "/calculator/sip-calculator" route causes the rest of the "/calculator/*" routes to not be matched and rendered.

Within the Switch component route path order and specificity matters. The Switch component "renders the first child <Route> or <Redirect> that matches the location." If the current URL path is "/calculator/sip-calculator" or "/calculator/xirr-mutual-fund-calculator" or any other "/calculator/*" and the first "/calculator/*" route path is "/calculator/:amcName", then "/calculator/:amcName" will be the route that is matched and its component will be rendered.

While you could sprinkle the exact prop all over the code, there's almost no need for it if you order your routes correctly in inverse order of path specificity, from more specific paths to less specific paths. Within the "/calculator" root route "/calculator/sip-calculator" etc. is more specific than "/calculator/:amcName" is more specific than "/calculator".

Example:

const routes = [
  // More specific paths than "/"
  { path: '/login', component: "./views/login", fullLayout: true, hideFooter: true },
  { path: '/register', component: "./views/login", fullLayout: true, hideFooter: true },
  { path: '/mutual-fund/deskpay', component: "./views/deskpay", fullLayout: true, hideFooter: true },

  // More specific "/calculator/..." route paths
  { path: '/calculator/sip-calculator', component: "./views/calculator/sip_calculator.js" },
  { path: '/calculator/lumpsum-calculator', component: "./views/calculator/lumpsum_calculator.js" },
  { path: '/calculator/sip-reverse-calculator', component: "./views/calculator/sip_reverse_calculator.js" },
  { path: '/calculator/cagr-calculator', component: "./views/calculator/cagr-calculator.js" },
  { path: '/calculator/xirr-mutual-fund-calculator', component: "./views/calculator/xirr-calculator" },
  { path: '/calculator/exit-load-calculator', component: "./views/calculator/exit-load-calculator" },
  { path: '/calculator/reverse-lumpsum-calculator', component: "./views/calculator/lumpsum-reverse-calculator" },
  { path: '/calculator/stepup-sip-calculator', component: "./views/calculator/sip-stepup-calculator" },
  { path: '/calculator/sip-calculator-with-inflation', component: "./views/calculator/sip-calculator-with-inflanation.js" },
  { path: '/calculator/capital-gain-calculator', component: "./views/calculator/capital-gain-calculator" },

  // Less specific "/calculator/*" path
  { path: '/calculator/:amcName', component: "./views/amc-calculator" },

  // Least specific "/calculator" path
  { path: '/calculator', component: "./views/calculator/index.js" },

  { path: '/500', component: "./views/error/500" },

  // Least specific known path, exact is ok here
  { path: '/', component: "./views/home", exact: true },

  // Least specific unknown path, catches anything not handled above
  { path: '*', component: "./views/error/404" },
];