New Router v6.x features and old project migrations

Reference link: blog.csdn.net/weixin_4090…

1. Update statements
npm install react-router@6 react-router-dom@6
Copy the code
2. Change Switch to Routes

This is one of the easiest changes to see. Switch uses unfound errors in 6.x. Migration is also simple, using Routes to replace most of its features.

// 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>
Copy the code
3. New feature changes of Route

Component /render replaced by element

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} />} / >
Copy the code
4. Change of nested routine

The specific changes are as follows:

  • Changed to accept child routes.
  • Simpler matching rules than and.
  • Path hierarchy is clearer

The most obvious change is the way the Redirect component is deprecated nested

1. The outlet implementation is equivalent to the Router-view component of vue for displaying the child routing page \
  • Usage/attention points
    1. To implement nested routines, you need a Layout component and an Outlet component, Layout, and display.
    • A Layout component is a Layout component. There is an Outlet component for displaying child components, where you can put sidebar/route links, etc., and write your own.

    = Outlet component, router official component, equivalent to vue router-view component. The nested pages are mounted on the Outlet component. 2. If you want to rely on outlets to implement nested routines, you can implement all routes in router.js, just need to add outlets to the corresponding page. 3. If there is a nested path, add /*

Implementation scheme: router.js

import { HashRouter as Router, Routes, Route } from "react-router-dom";
import LayoutIndex from ".. /layout";
import Home from ".. /pages/home/index";
import Test1 from ".. /pages/test1";

const RouterFun = () = > {
  return (
    <Router>{/* After loading components asynchronously with lazy, you need to use Suspense component wraps. Fallback can be loading, which is the content of asynchronous wrapping */} {/* Requires this component route to display */}<Routes>
        <Route path="/ *" element={<LayoutIndex />} ><Route path="index/*" element={<Home />} ><Route path="test1" element={<Test1 />} / ></Route>
        </Route>
      </Routes>
    </Router>
  );
};

export default RouterFun;
Copy the code

LayoutIndex.tsx

import { Outlet } from "react-router-dom";
import Head from './head/index' //* Add headers
import Footer from './footer/index' //* introduce the bottom

const LayoutIndex = () = > {
  return (
    <div id="layout-index" className="layout-index common-width-100vw">
        <Head />
        <Outlet/>
        <Footer />
    </div>
  );
};

export default LayoutIndex;
Copy the code

Home.tsx

import { Outlet } from "react-router-dom";

const HomeIndex = () = > {
    return (<div>
        <Outlet/>Home page</div>);
}

export default HomeIndex;
Copy the code

Test.tsx

const Test = () = > {
    return (<div>Test1
    </div>)}export default Test
Copy the code

The above example writes nested routines directly in router.js, and then just makes sure the page has outlets to show the lower-level routes. So LayoutIndex has an Outlet to show the Home component, and the Home component has an Outlet to show the Test1 component

2. The following page displays a nested Route

Those of you who have written v5.x should know. That is, without outlets, Route itself is a Layout. Let’s modify the above example to implement router.js

import { HashRouter as Router, Routes, Route } from "react-router-dom";
import LayoutIndex from ".. /layout";

const RouterFun = () = > {
  return (
    <Router>{/* After loading components asynchronously with lazy, you need to use Suspense component wraps. Fallback can be loading, which is the content of asynchronous wrapping */} {/* Requires this component route to display */}<Routes>
        <Route path="/ *" element={<LayoutIndex />} ></Route>
      </Routes>
    </Router>
  );
};

export default RouterFun;
Copy the code

LayoutIndex.tsx

import { Routes, Route } from "react-router-dom";
import Head from './head/index' //* Add headers
import Footer from './footer/index' //* introduce the bottom
import Home from ".. /pages/home/index";

const LayoutIndex = () = > {
  return (
    <div id="layout-index" className="layout-index common-width-100vw">
        <Head />
        <Routes>
          <Route path="index/*" element={<Home/>} ></Route>
        </Routes>
        <Footer />
    </div>
  );
};

export default LayoutIndex;
Copy the code

Home.tsx

import { Routes, Route } from "react-router-dom";
import Test1 from ".. /test1";
const HomeIndex = () = > {
    return (<div>
        <Routes>
          <Route path="test1" element={<Test1/>} ></Route>
        </Routes>Home page</div>);
}

export default HomeIndex;
Copy the code

test1.jsx

const Test = () = > {
    return (<div>Test1
    </div>)}export default Test
Copy the code

All it does is replace an Outlet with a Route. However, I do not recommend this approach because it does not present all routes as a routing tree. UseRoutes replaces router.config.js. If the Route index is set as the primary Route, no children can be set as the primary Route

attribute

If we are in the case of multi-level routing, we need a home page, or a default page. So the index property will help you. Let’s modify the above example. Home.jsx

import { Routes, Route } from "react-router-dom";
import Test1 from ".. /test1";
import Test from '.. /test'
const HomeIndex = () = > {
    return (<div>
        <Routes>
          <Route index element={<Test />} ></Route> 
          <Route path="test1" element={<Test1/>} ></Route>
        </Routes>Home page</div>);
}

export default HomeIndex;
Copy the code

We added a default route to the Home page that will display the Test component when we first enter the page.

useRoutes

We can generate a routing tree using useRoutes, which is similar to the Outlet we wrote above. Just use Hook to implement it. Let’s now modify the above example. Note:

  1. Route and Outlet are actually the same concept and can be used as the same thing, even if you introduce these two components into a page, the page will be mounted on two elements
  2. Elements generated by useRoutes still need to be mounted under the Router component

router.config.js

import { HashRouter as Router, Routes, Route, useRoutes } from "react-router-dom";
import LayoutIndex from ".. /layout";
import Home from ".. /pages/home";
import Test1 from '.. /pages/test1'

const RouterConfig = () = > {
    const element = useRoutes([
        {
          path: "/".element: <LayoutIndex />,
          children: [
              {
                  path: 'index/*'.element: <Home />,
                  children: [
                      {
                          path: 'test1'.element: <Test1 />,}]}]},]);return element
}

export default RouterConfig
Copy the code

router.js

import { HashRouter as Router } from "react-router-dom";
import RouterConfig from "./router.config";
const RouterFun = () = > {

    
  return (
    <Router>
      <RouterConfig />
    </Router>
  );
};

export default RouterFun;
Copy the code

Components such as Layout and outlets are referenced the same as home.tsx

import { Routes, Route, Outlet } from "react-router-dom";
import Test from '.. /test'
const HomeIndex = () = > {
    return (<div>
        <Routes>
          <Route index element={<Test />} ></Route> 
        </Routes>
        <Outlet />Home page</div>);
}

export default HomeIndex;
Copy the code
conclusion

In fact, the migration scheme is also very simple, here is a simple summary:

  1. Modify the package version in package.json, delete and re-download the NPM package.
  2. Change the Switch component to the Routes component.
  3. Router.config. js can be modified by referring to both nested routines and useRouter’s implementation.
  4. This part is mainly to write some introduction of Router components, such as link component, API, etc. Please refer to the following two articles
Refer to the link