react-router-config nested routes doesn't work

user_7087084 0
Viewed 36

Hello I am trying to use react-router-config in my project and im stuck with a problem that routes with params refuse to work.

Here is my configuration:

const App = () => {
  return (
        <Router history={history}>{renderRoutes(routes)}</Router>
  );
};

export const routes = [
  {
    component: Root,
    routes: [
      {
        path: PATH.ROOT,
        component: Home,
        exact: true
      },
      {
        path: "/child/:id",
        component: Test
        exact: true
      }
    ]
  }
];

const Root = ({ route }) => {
  const { routes } = route;
  return (
    <>
      <Header />
      <main className={styles.container}>{renderRoutes(routes)}</main>
    </>
  );
};

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <NavBar />
    </div>
  );
};

const Test = () => {
  return (
    <div>
      <h1>Tesst</h1>
    </div>
  );
};

when i try to go to the /child/123 route i get the 404 error enter image description here

could you tell me please what am i doing wrong, maybe it has something to do with webpack configuration?

react-router webpack reactjs
1 Answers

to make it work i had to add <base href="/" /> into my index.html template, but i still quite dont understand it's function could some1 explain me more indepth about this tag what it does and why we should use it?

user_70870840
Related