Front-endReact

Basic usage of route@5

  1. React-router understanding

    1. A plugin library for react. (react-xxx are basically plug-in libraries)

      The library we installed here is not react-router. react-router has three libraries for three platforms. Three libraries:

      1. web: Web page development (actually learning this). The library name is react-router-dom
      2. native: used by react native.
      3. anywhere: can be used anywhere

    2. It is specially used to implement a SPA application.

    3. React-based projects will basically use this library.


  2. React Router three different libraries on npm

    1. The core library of react-router routing provides many: components, hooks

    2. react-router-dom contains all content of react-router, and adds some components dedicated to DOM, such as <BrowserRouter>.

    3. react-router-native contains all content of react-router, and adds some APIs dedicated to ReactNative, such as <NativeRouter>.


  3. Install react-router-dom

    npm i react-router-dom@5 or `yarn add react-router-dom@5


  4. Basic use of routing

    The front-end routing implementation is divided into two steps: 1. Clicking on the navigation link causes the path to change; 2. The path change is detected by the router, and the components are matched and displayed. The content of the routing component display area is variable, but other areas are fixed. Therefore, compared to pages that do not use routing, routing-related codes will only be written in the navigation area and routing component display area. The code for fixed display in other areas is written as usual.


    Import library

    1
    import {} from 'react-router-dom' //Using `{}` is because many built-in components and built-in APIs need to be exposed, which one to use.

    Navigation links

    In native html, <a> is used to jump to different pages, and in React, routing links <Link> are used to switch components.

    1
    2
    3
    import {Link} from 'react-router-dom'; //Introduce Link
    <Link className="list-group-item" to="/about">About</Link>
    <Link className="list-group-item" to="/home">Home</Link>

    <Link> is used instead of <a>. Here there is no href, and to=" " is used instead. Note that about in to="/about" is best lowercase, because it does not recognize case. Also don’t write to="./about", because there is never . in the web path.

    But directly writing the code in the above code block will report an error: Error: Invariant failed: You should not use <Link> outside a <Router>. Because routing links and routes are managed by the router, that is, a <Router> should be wrapped outside <Link>.

    And, When using <Router> to wrap <Link>, specify the Router type: <BrowserRouter> / <HashRouter> . Otherwise, an error will be reported: TypeError: Cannot read property ‘location’ of undefined.


    routing component

    1
    2
    3
    4
    5
    6
    import {Link,Route} from 'react-router-dom'; //First import the registered route
    import Home from './components/Home'; // does not conform to the specification, see React.5.3.1 for details
    import About from './components/About';

    <Route path="/home" component={Home}/>
    <Route path="/about" component={about}/>

    First, import the registered routing tag <Route/>. <Route/> is self-closing and has attributes path and component/element. Note that component is lowercase (some compilers will suggest uppercase).

    The routing component should also be wrapped with <BrowserRouter> / <HashRouter> , otherwise an error will be reported, which is the same as the navigation link.


    Router management (package <BrowserRouter> / <HashRouter>)

    The entire application must be managed by a router, that is, packaged in the same <BrowserRouter> / <HashRouter>, otherwise the routing components cannot be switched. For simplicity, directly wrap the router management package outside the <App/> root component under the index.js file.

    1
    2
    3
    4
    5
    6
    7
    import {BrowserRouter} from 'react-router-dom';
    ReactDOM. render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>,
        document. getElementById('root')
    )

​

  1. Summary

    1. Define the navigation area and display area in the interface.

    2. Change the a label of the navigation area to the Link label

      1
      <Link to="/xxxx">Demo</Link>

    3. Write the Route label in the display area for route matching

      1
      <Route path="/xxxx" component={Demo}/>

    4. The outermost part of <App/> wraps a <BrowserRouter> / <HashRouter>

​

Share