First of all, the React-Router is currently in beta, but it has been more than a year since it was last released

My personal blog has been upgraded from V5 to V6, if you have a new project, routing is simple, or suggest a try

Personally, THERE are two benefits to using version v6

1. Halve the size of the package

The underlying dependency library History uses version V5, and v5 has version 0 dependencies

Instead of path-to-regexp, simple conversion rules are implemented internally

v5:

v6:

2. More friendly routing guard support

In V5, the only way to customize the Prompt is to pass in a message and then use window.Confirm to confirm the Prompt. In V6, the only way to customize the Prompt is to pass getUserConfirmation in the Router layer. This can be customized at the component layer

This feature is supported in V6:

        function Home() {
            const customConfirm = ({action, location, retry}) => {
                console.log(action, location, retry);
                if(window.confirm('hello'))retry()
            }
            useBlocker(customConfirm, true)
            const navigate = useNavigate()
            const click = () => {
                navigate('/about')
            }
            return (
                <div>
                    <button onClick={click}>about</button>
                    'home'
                </div>
            )
        }
Copy the code

Note that using routeGuard hooks in version V6 automatically adds beforeUnload events

About the V6 VERSION of the API, as well as v5 => V6 upgrade, here is not detailed, you can read the official document: API, Upgrade

Some known pits to share with you:

1. Because version v5 was written by the class component, version V6 was changed to hooks, which may occur in different execution orders. See this issue for details

2. UseParams returns only the parameters of the current route, but not the parameters of the child route. You can view this issue for details

3. The Route component does not match routes. For example, the current Route is /home

In v5:

<Route path='/home' component={Home} />
<Route path='/about' component={About} />
Copy the code

The home route is matched and the home component is displayed

But if you write like this in V6

<Route path='/home' element={<Home />} />
<Route path='/about' element={<About />} />
Copy the code

Both the Home and About components are displayed on the page

The reason is that the v6 version removes the Route matching capability:

v5:

v6:

In v6 the Route component must be used in conjunction with the Routes component.

Due to changes in the component tree caused by this problem, component overloading or updating is another issue, so if you want to upgrade the Route component that did not work with the Switch component in v5, you should consider it

In addition, I recommend my own source reading notes for v4 Histroy and V5 React-Router to students who are interested in the source code (although it is slightly outdated now, but familiar with the old version of the source code, for the new version of the source code that is not easy to get).