I'm using useRoutes hook to setup my app routes because it's cleaner than using Routes and Route Component. But the problem is that I want to a Route component inside one of my pages to show a modal and when I add the Route Component it shows this error message:

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

Here is a small version of my code: App.jsx

const routing = useRoutes([{ path: "/myPage", element: <MyPage /> }])
return <BrowserRouter>{routing}</BrowserRouter>

MyPage.jsx

return (
    <div>
        List of items
    </div>

    <Route path="/myPage/:id" element={<Modal>Detail View</Modal>} />
)

I don't want to add the modal route to the useRoutes hook because I have too many modals and it makes the route array out of the control.

CodePudding user response：

If you have routed components that are rendering descendent routes then you'll need to address 2 things.

1. The parent route will need to append the "*" wildcard path matcher to its path value.
2. All Route components can only be rendered as a child of the Routes component (for route matching) or another Route component in the case of nesting routes. Note that nested Route components is not the same thing as rendering descendent routes.

Code:

const routing = useRoutes([
  {
    path: "/myPage/*",  // <-- allow descendent route path matching
    element: <MyPage />
  }
]);

return (
  <BrowserRouter>
    {routing}
  </BrowserRouter>
);

MyPage:

Render the Route into a Routes component and fix the path. The descendent routes build their paths relative to their parent path.

return (
  <>
    <div>
      List of items
    </div>

    <Routes>
      <Route
        path="/:id" // <-- "/mypage/:id"
        element={<Modal>Detail View</Modal>}
      />
    </Routes>
  </>
);

CodePudding user response：

Approach 2: Using the useRoutes hook

routes.js

import { useRoutes } from "react-router-dom";
import Home from './pages/Home'
import About from './pages/About'
import Login from './pages/Login'
import SignUp from './pages/Signup'
import AuthLayout from './layouts/AuthLayout'
import MainLayout from './layouts/MainLayout'

export default function Router() {
let element = useRoutes([
    {
        element: <AuthLayout />,
        children: [
           { path: "/", element: <Login /> },
           { path: "signup", element: <SignUp /> },
        ],
    },
    {
        element: <MainLayout />,
        children: [
            { path: "home", element: <Home /> },
            { path: "about", element: <About /> },
        ],
    },
]);
return element;
}

App.js

import "./styles.css";
import { BrowserRouter } from "react-router-dom";
import Router from './routes'

export default function App() {
return (
    <BrowserRouter>
        <div className="App">
            <h1>useRoutes Example</h1>
            <Router/>
        </div>
    </BrowserRouter>
);
}

The other components are defined the same way as in the previous approach. You can look at the sandbox below to see it all in one cohesive example.

Note that for clarity and separation of concerns in writing code, I do not declare the object-based config in the same file as to where I want to use the routes. In my project, I created a folder called routes and a file called index.js to hold the routes. Another common convention I have seen devs do is to create a file in the src folder called routes.js and put it all there.