The use of the react to the router

The react-router is essential when using create-react-app for projects. But most of the tutorials online are based on v5. The purpose of this article is to explore the use of react-Router version v6. The main reference is its official documentation.

The installation

Terminal operation

$ npm install react-router-dom@6
Copy the code

Entry file – Sets the routing mode

Routing describes the mapping between URL and UI. This mapping is unidirectional, that is, URL changes cause UI updates (no page refresh is required). Two common modes are hash mode and history mode. The corresponding components in the React-Router are HashRouter and BrowserRouter. A HashRouter, which listens for changes in hash values through window.addeventListener (‘hashChange’,callback) and passes them to its nested components. The location data is then passed to the descendant component through the context. The BrowserRouter matches the path passed in by the props with the PathName passed in by the context, and then decides whether to execute the render component. Application Scenario The History mode, that is, BrowserRouter, can be used only when a background server is available and all paths are configured to the home page.

They are used as follows. In the entry file. src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from "react-router-dom";

ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>.document.getElementById('root'));Copy the code

Declarations in App components

List the UIs used in your project and their corresponding urls in the App component. Here we use treeShaking’s idea to pull the components out. Set the default Route
}/> to enter the page rendered in the root directory for the Money component. Flexible use of the path and to parameters allows you to customize the default route for more sub-pages.

import React from 'react';
import {Routes, Route, Navigate} from "react-router-dom";
import Money from "views/money";
import Tags from "views/tag";
import Statistics from "views/statistics";
import Nomatch from "views/nomatch";
import {TagsInside} from 'views/TagsInside'

function App() {
    return (
            <Routes>
                <Route path="tags" element={<Tags/>} / ><Route path="tags/:id" element={<TagsInside/>} / ><Route path="money" element={<Money/>} / ><Route path="statistics" element={<Statistics/>} / ><Route path="/" element={<Navigate to="/money"/>} / ><Route path=The '*' element={<Nomatch/>} / ></Routes>
    );
}

export default App;
Copy the code

use

Using Navlink, it has the following properties:

import {NavLink} from "react-router-dom";
import React from "react";
import Icon from "./icon";


const Nav:React.FC=() = >{
    return(
           <NavLink className={(navData)= > navData.isActive ? 'active' : ""} to="/tags">
                <Icon name='tag'/>
                <div>Tags</div>
           </NavLink>
    );
} 

export {Nav}
Copy the code