The useRoutes() hook to define and render routes using regular JavaScript objects instead of and elements. The useRoutes() hook can be used either with class component or with function component to implement Routers in react application.
Routes function using userRoutes() hook
1 const MyRouter = () => {
2
3 let routes = useRoutes([
4 {
5 path: "user", element: <User />,
6 children: [
7 { path: "profile", element: <Profile /> },
8 { path: "transaction", element: <Transaction /> },
9 ]
10 },
11 { path: "account", element: <Account /> },
12 { path: '/', element: <Navigate to="/user/profile" /> },
13 ]);
14 return routes;
15 }
In the above example, a arrow function is define that create routes object by specifying an array of routes object that includes routes and nested routes and returns a resulting object that will be added inside Router element in the component. It can be used in the class or functional component.
React class component with useRoutes()
React class component with useRoutes()
1 import React from 'react';
2 import { BrowserRouter as Router, useRoutes, Link, Navigate } from 'react-router-dom';
3
4 import User from './components/user';
5 import Profile from './components/profile';
6 import Transaction from './components/transaction';
7 import Account from './components/account';
8
9 class App extends React.Component {
10
11 render() {
12
13 return (
14 <div>
15 <Router>
16 <div>
17 <p><Link to="/user">User</Link></p>
18 <p><Link to="/account">Account</Link></p>
19 </div>
20 <MyRouter /> {}
21 </Router>
22 </div>
23 )
24 }
25 }
26 export default App;
27
28 const MyRouter = () => {
29
30 let routes = useRoutes([
31 {
32 path: "user", element: <User />,
33 children: [
34 { path: "profile", element: <Profile /> },
35 { path: "transaction", element: <Transaction /> },
36 ]
37 },
38 { path: "account", element: <Account /> },
39 { path: '/', element: <Navigate to="/user/profile" /> },
40 ]);
41 return routes;
42 }
In the above example, a class component is created by extending a React.Component with render() method. A function define that creates routes using useRoutes() hook by specifying a routes. A function is specified in the Routes element in the component render() method. When a component render on browser, it calls the useRoutes() hook that returns routes object that enable routes for the component.
React function component with useRoutes()
React function component with useRoutes()
1 import React from 'react';
2 import { BrowserRouter as Router, useRoutes, Link, Navigate } from 'react-router-dom';
3
4 import User from './components/user';
5 import Profile from './components/profile';
6 import Transaction from './components/transaction';
7 import Account from './components/account';
8
9 export default function App() {
10
11 return (
12 <div>
13 <Router>
14 <div>
15 <p><Link to="/user">User</Link></p>
16 <p><Link to="/account">Account</Link></p>
17 </div>
18 <MyRouter />
19 </Router>
20 </div>
21 )
22 }
23
24 const MyRouter = () => {
25
26 let routes = useRoutes([
27 {
28 path: "user", element: <User />,
29 children: [
30 { path: "profile", element: <Profile /> },
31 { path: "transaction", element: <Transaction /> },
32 ]
33 },
34 { path: "account", element: <Account /> },
35 { path: '/', element: <Navigate to="/user/profile" /> },
36 ]);
37 return routes;
38 }
In the above example, a functional component created that returns a single element or wrapper element by adding a Router element. An arrow function is define that returns a routes object that created using useRoutes() by specifying a array of routes object.
Related options for your search