I want to split my web app into 2 parts using react router. I am using a router inside of one of the previously mentioned routes

Question

/src
|-- /components
|   |-- /signin
|       |-- SignIn.js
|       |-- /home
|           |-- Home.js
|
|           |-- /dashboard
|               |-- Dashboard.js
|    |-- /assignee
|-- /App.js
|-- /index.js

As you can see i want to split into 2 parts(signin(adimin part), assignee(user part)). I am using router for signin and assignee Also I want to use router for home page, to display dashboard and other pages. How do I make it possible

function App() {
  return (
    <Router>
      <div className="maindiv">
        <Routes>
          <Route path="/" element={<SignIn />} />
          <Route path="/assignment" element={<AssigneePage />} />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <Container className="content">
        <div className="side-nav">
          <Nav />
        </div>
        <div className="main-content">
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/review" element={<Review />} />
          </Routes>
        </div>
      </Container>
    </div>
  );
}

Home is stacked inside Signup

When I try "http://localhost:3000/dashboard" it gives me this error:

history.ts:501 No routes matched location "/dashboard"`

Answer 1

If the Signin component, rendered on "/signin" renders descendent routes, e.g. Signin renders another Routes and set of Route components, then the parent route should specify a trailing wildcard "*" matcher, or splat, so that all descendent routes can be matched and rendered.

Given your code/route structure

/src
|-- /components
|   |-- /signin
|       |-- SignIn.js
|       |-- /home
|           |-- Home.js
|
|           |-- /dashboard
|               |-- Dashboard.js
|    |-- /assignee
|-- /App.js
|-- /index.js

Hopefully I've understood correctly your routing organization.

Example:

function App() {
  return (
    <Router>
      <div className="maindiv">
        <Routes>
          <Route path="/*" element={<SignIn />} />
          <Route path="/assignment" element={<AssigneePage />} />
        </Routes>
      </div>
    </Router>
  );
}

Since Home also renders descendent routes, its parent route in Signin also needs to append the wildcard matcher.

const SignIn = () => {
  ...

  return (
    ...
    <Routes>
      <Route
        path="/home/*"     // <-- "/signin/home"
        element={<Home />}
      />
    </Routes>
    ...
  );
}

function Home() {
  return (
    <div>
      <Container className="content">
        <div className="side-nav">
          <Nav />
        </div>
        <div className="main-content">
          <Routes>
            <Route
              path="/dashboard"       // <-- "/signin/home/dashboard"
              element={<Dashboard />}
            />
            <Route
              path="/review"          // <-- "/signin/home/review"
              element={<Review />}
            />
          </Routes>
        </div>
      </Container>
    </div>
  );
}

See route splats for more information.