1. Installation dependency

npm i react-router-dom

2. Introduce the components required for routing and page components

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Foo from './Foo';
import Bar from './Bar';
​
function App(){
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/foo' element={Foo} />
                <Route path='/bar' element={Bar} />
            </Routes>
        </BrowserRouter>
    )
}

Note: the BrowserRouter component should be placed outside all the top-level components, so as to ensure that there is no error when the internal components use Link for route jump

1, Switch renamed Routes

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

2, New features and changes of Route

component/render is replaced by element

In short. It's just getting better.

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

3, Route jump

When jumping a route, if the path starts with / it is an absolute route, otherwise it is a relative route, that is, it is changed relative to the "current URL"

3, Link assembly

The Link component can only be used inside the Router, so the components using the Link component must be placed in the Router on the top floor

import { Link } from 'react-router-dom';
​
<Link to='foo'>to foo</Link>

4, NavLink assembly

The functions of NavLink component and Link component are the same. The difference is that you can judge whether its to attribute is the currently matched route
The style or className of the NavLink component can receive a function, which receives an isActive parameter, and the style can be adjusted according to the parameter

import { NavLink } from 'react-router-dom';
​
function Foo(){
    return (
        <NavLink
            style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) }
        >Click here</NavLink>
    )
}

5, Outlet (render any matching child routing pages)

      return (
        <div className="A">
          <h3>I am A assembly --------- Example of programming route navigation</h3>
          <div className="A-navBox">
            <Button type="primary" onClick={() => navigateRouter(1, 1, "i am Jason Ma")}>
              params Chuan Shen
            </Button>
            <Button onClick={() => navigateRouter(2, 18, "i am Jason Ma")}>search Chuan Shen</Button>
            <Button type="dashed" onClick={() => navigateRouter(3, 999, "i am Jason Ma")}>
              state Chuan Shen
            </Button>
          </div>

          {/* Render any matching child routing pages */}
          <Outlet></Outlet>
        </div>
  );

6, Get params parameter

Define the path parameter in the path attribute in the Route component
Access path parameters through useParams hook within the component

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>
​
import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

In previous versions, the props of the component will contain a match object, in which the path parameters can be obtained. But in the latest 6 In version x, parameters cannot be obtained from props.

Moreover, the withRouter high-order components for class components have been removed. Therefore, for class components, there are two compatible methods of using parameters:

Rewrite a class component to a function component
Byte write a HOC to wrap the class component, get the parameters with useParams, and pass them into the original class component through props

7, Programmed route navigation uses useNavigate instead of useHistory

Using useNavigate hook function to generate navigate object, you can complete route jump through JS code

// v5
import { useHistory } from 'react-router-dom';
 
 
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

Now, history Replace push() with navigation():

// v6
import { useNavigate } from 'react-router-dom';
 
 
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

The usage of history will also be replaced by:

// v5
history.push('/home');
history.replace('/home');
 
 
// v6
navigate('/home');
navigate('/home', {replace: true});

8, search parameter

Query parameters do not need to be defined in the route
Use useSearchParams hook to access query parameters. Its usage is similar to useState, which returns the current object and the method to change it
When changing searchParams, all query parameters must be passed in, otherwise the existing parameters will be overwritten

import { useSearchParams } from 'react-router-dom';
​
// Current path is / foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

9, Default route

Definition: in nested routes, if the URL only matches the parent URL, the route with index attribute will be displayed in the Outlet

<Routes>
    <Route path='/foo' element={Foo}>
        <Route index element={Default}></Route>
        <Route path='bar' element={Bar}></Route>
    </Route>
</Routes>

When the url is / Foo: the Outlet in Foo will display the Default component
When the url is / foo/bar: the Outlet in Foo will be displayed as a Bar component

10, Fully matched routing

Definition: when the value of path attribute is *, any (non empty) path can be matched, and the matching has the lowest priority. Can be used to set 404 pages.

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

11, Multi group routing

Usually, there is only one Routes component in an application.

However, multiple route exits can also be defined according to actual needs (for example, the sidebar and main page change with the URL)

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

12, Redirect

When you want to redirect to path / b under a path / A, you can redirect to other paths through the navigation component

It is equivalent to the Redirect component in the previous version

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}

This article is a reprint of the article
Copyright notice: This article is the original article of CSDN blogger "Jason Ma, front-end engineer"
Original link: https://blog.csdn.net/qq_42753705/article/details/121871363