Render multiple Route into a main Router in react-router-dom v5-CodePudding

I have multiple components with different paths (routes) and would like to export those to a single Main router component.

For example:

routeComponent1.js

export default function childRoutes() {
  return (
    <div>
      <Route path="/foo" component={foo} />
      <Route path="/bar" component={bar} />
    </div>
  );
}

routeComponent2.js

export default function childRoutes2() {
  return (
    <div>
      <Route path="/foo2" component={foo2} />
      <Route path="/bar2" component={bar2} />
    </div>
  );
}

I would like to use it in

root.js

import routeComponent1 from 'routeComponent1.js';
import routeComponent2 from 'routeComponent2.js';

class Root extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Router>{routeComponent1}</Router>;
  }
}

It is giving an error - Invariant Violation: <Route> elements are for router configuration only and should not be rendered.

Expecting the

<Router>
  <div>
    <Route path="/foo" component={foo} />
    <Route path="/bar" component={bar} />
  </div>
</Router>

CodePudding user response：

routeComponent1 and routeComponent2 are React components. React components are Capitalized and rendered as JSX.

Example:

import RouteComponent1 from 'routeComponent1.js';
import RouteComponent2 from 'routeComponent2.js';

class Root extends Component {
  render() {
    return (
      <Router>
        <RouteComponent1 />
        <RouteComponent2 />
      </Router>
    );
  }
}

CodePudding user response：

Assuming you're using the latest version of react router (v6), you can use nested routes as described here: https://reactrouter.com/en/main/start/overview#nested-routes

So this is what your App.jsx might look like:

import {
  BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import {AuthRoute, NonAuthRoute, UserParent} from "../components";
import {
  Dasboard, UserList, CreateUser, SignIn, Page404
} from "./pages"


// Define your paths here ...
export const paths = {
  SIGN_IN: "/sign-in",
  DASHBOARD: "/dashboard",
  LIST_USERS: "/users/list"
  CREATE_USERS: "/users/create"
}

// All your routes which require authentication (requires login)
const authRoutes = [
  {
    path: paths.DASHBOARD,
    element: <Dashboard />
  },
]
// Authenticated routes but need a particular parent component
const userAuthRoutes = [
  {
    path: paths.LIST_USERS,
    element: <UserList />
  },
  {
    path: paths.CREATE_USERS,
    element: <CreateUser />
  }
]

// Paths that dont require authentication
const nonAuthRoutes = [
  {
    path: paths.SIGN_IN,
    element: <SignIn />
  },
]


const App = () => {
  return (
    <Router>
      <Routes>
        {/* AUTHENTICATED ROUTES */}
        <Route element={<AuthRoute />}>
          {authRoutes.map((route, index) =>
            <Route key={index} {...route} />;
          )}
          {/* User Management */}
          <Route element={<UserParent />}>
            {userAuthRoutes.map((route, index) =>
              <Route key={index} {...route} />
            )}
          </Route>
        </Route>

        {/* NON-AUTH ROUTES */}
        <Route element={<NonAuthRoute />}>
          {nonAuthRoutes.map((route, index) =>
            <Route key={index} {...route} />;
          )}
        </Route>
        <Route path="*" element={<Page404 />} />
      </Routes>
    </Router>
  )
}