SoFunction
Updated on 2025-04-06

react-router-dom V6 configuration usage practice

Recently, I'm building a PC projectReactThe framework involves React Router. Sometimes the development students need to try something new so that they will not be boring during the development process. Based on this concept, they started with the V6 version when building it (although it is just a new version, not a new thing)...

Compared with V5, the V6 version has made a lot of optimizations, including writing, routing nesting, routing configuration, authentication, etc. Let’s briefly introduce how to use it.

1. Regarding writing

When registering the route, it changed from Switch to Routes

//V5 version import {Route, Switch} from 'react-router-dom';
 
<div>
    <Switch>
        ......
        ......
    </Switch>
 </div>
//V6 version import {Route, Routes } from 'react-router-dom';
 
<div>
    <Routes >
        ......
        ......
    </Routes>
 </div>

Without using the Route tag to wrap subcomponents, you can use the element attribute directly, and there is no need for exact matches. The internal algorithm of the V6 version changes, and it defaults to match the complete path. The order of sequence is no longer important. It can automatically find the optimal matching path.

//V5 versionimport {Route, Switch} from 'react-router-dom';
 
<div>
    <Switch>
        <Route exact  path="/">
            <Home />
        </Route>
    </Switch>
 </div>
//V6 versionimport {Route, Routes } from 'react-router-dom';
 
<div>
    <Routes >
        <Route path="/" element={<Home />} />
    </Routes>
 
 </div>

Change Redirect to Navigate

//Routing configuration//V5 code is as followsimport { Redirect } from 'react-router-dom';
<Redirect to="/home" />
//V6 is as followsimport { Navigate } from 'react-router-dom';
<Route path="/" element ={<Navigate replace to="/home" />} />

//Inside the component//V5 versionimport { Redirect } from 'react-router-dom';
//Redirect to homepagereturn <Redirect to="/" />

//V6 versionimport { Navigate } from 'react-router-dom';
//Redirect to homepagereturn <Navigate to="/" />

Use useNavigate instead of useHistory

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
//If you go to the home pagenavigate("/home");
//It can also be usednavigate(-1);  //Reverse to the previous pagenavigate(-2); //Reverse to the previous page of the previous two pages,navigate(1); //Forward navigation And so on

2. Optimization of nesting of routing

useOutletComponent, this component is a placeholder that tells React Router where the content nested should be placed.

//Routing<Routes>
  <Route path='/user/*'  element={<User />} 
   	    <Route path='user-item' element={<div>I'm a nested child</div>} />
  <Route/>
</Routes>

//In the User componentimport {Outlet} from 'react-router-dom';
const User = () => {
	return 
	<section>
	  <h1>I'm an external container</h1>
	  <Outlet />
	</section>
}
export default User;

3. Flexible configuration of routing

Can be used through the APIuseRoutesRead a routing configuration array and generate a corresponding routing component list to realize routing configuration.

In addition, you can add other configuration information in the routing configuration, such as routing icons, whether you need to log in, etc.

import { useRoutes } from 'react-router-dom';
export const routes = [
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: 'home',
                meta: {
                    title: 'front page',
                    icon: <DashboardOutlined />,
                },
                children: [
                    {
                        path: 'application',
                        element: <Application />,
                        meta: {
                            title: 'application',
                        }
                    }
                ]
            },
            {
                path: 'setting',
                element: <Setting />,
                meta: {
                    title: 'set up',
                    icon: <UserOutlined />,   // Chart name                }
            }
        ]
    },
    {
        path: '/login',
        element: <Login />,
        meta: {
            title: 'Log in',
            noLogin: true,
            hideMenu: true
        }
    },
    {
        path: '*',
        element: <Page404 />,
        meta: {
            title: '404',
            noLogin: true,
            hideMenu: true
        }
    },
];
const Routes = () => (
    useRoutes(routes)
)
export default Routes;

4. Regarding routing authentication

I won’t have a lot of overview here, just to make a simple login verification example. Each project has different authentication methods. You can combine the meta information in the third point above to implement it yourself.

const onRouteBefore = ({ pathname, meta }) => {
  // Dynamically modify the page title  if ( !== undefined) {
     = 
  }
  // Jump to log in page if you are not logged in  if (!) {
    if (!isLogin) {
      return '/login'
    }
  }
}

This is the end of this article about the configuration and use practice of react-router-dom V6. For more related react-router-dom V6 configuration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!