0
194
ViewsHow to get routes from other location/function in react-router-dom v6?
I am trying React Router V06, but facing a problem where I have been trying it below this way but every routes and page are blank.
Code:
// Main App Function
const App = () => {
return (
<Router>
<Fragment>
<Navbar />
<Routes>
<Route index strict path="/" element={<Landing />} />
**{/* Here I want to render paths from other function*/}**
<Route element={<AppRoutes />} />
</Routes>
</Fragment>
</Router>
);
};
export default App;
// In AppRoutes Function
const AppRoutes = () => (
<section className="container">
<Routes>
<Route strict path="login" element={<Login />} />
<Route strict path="register" element={<Register />} />
<Route path="*" element={<NotFound />} />
</Routes>
</section>
);
export default AppRoutes;
·
Juan Pablo Isaza
1 answers
Answer question0
In app, declare the Landing component to be the index page, and render AppRoutes on a "/*" path to allow matching sub-routes.
App
<Router>
<Navbar />
<Routes>
<Route index element={<Landing />} />
<Route path="/*" element={<AppRoutes />} />
</Routes>
</Router>
AppRoutes
const AppRoutes = () => (
<section className="container">
<Routes>
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="*" element={<NotFound />} />
</Routes>
</section>
);
·
Juan Pablo Isaza
Report
Answer question