react-router

  • Routing mode Settings: set at the top level of index.js

    Hash mode:

    Histroy mode:

  • Route

    • Path: indicates the rule to match the current route

      1. By default, Route does fuzzy matching, that is, a URL that starts with the current path is matched successfully

      2. Exact matches are performed only when URL ===path or URL ===path/

      3. Strict The match is strict. The match is successful only when the URL is === PATH. The match is implemented only when exact matches are available

      4. Multipath matching: Pass multiple urls as arrays to a Route

      5. Dynamic routing

              {/* <Route path={["/list","/list/:type","/list/:type/:page"]} exact component={ListView} /> */}
      {/* 
             */}
      <Route path="/list/:type? /:page?" exact component={List} />
Copy the code
        • Component receives the view to which the rule matches, or passes routing parameters to the view component via functions
        • Render can be used for class components by passing routing parameters to view components via functions
          <Route path={["/"."/index"."/home"]} exact render={(props) = >{ // Multipathing matches
        return <HomeView 
            user={user}
            {. props} / >}} / ><Route path="/about" exact  component={AboutView} />
Copy the code

  • Link

    • To: The URL page is displayed
    • And the difference between a tag: Link internal jump interception, is a single page view, and a tag will re-request the server, refresh the browser
    • Link indicates the url within the application, and TAG A indicates the URL outside the application.
    import { Link } from "react-router-dom";

function Nav() {
  return <nav>
    <Link to="/">Home page</Link>
    <span> | </span>
    <Link to="/about">about</Link>
    <span> | </span>
    <Link to="/join">join</Link>
    <span> | </span>{/ *<a href="/home">Home page - 2</a>
    <span> | </span>* /} {/ *<Link to="https://www.baidu.com">baidu</Link>* /}<a href="https://www.baidu.com">baidu</a>
  </nav>
}

export default Nav;
Copy the code

  • NavLink

    NavLink is similar to Link in that it can jump to the path specified by to. NavLink adds class=”active” to the selected a tag by default. You can change the class by assigning a new class name

    1. The default is fuzzy matching

    2. To achieve exact matching, add exact

    3. Modify activeStyle to modify the current A label content style

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

function Nav() {
  return (
    <nav className="nav">
      <NavLink
        to="/"
        exact
        activeClassName="root-active"
        activeStyle={{ fontWeight: "bold"}}isActive={(match,{pathname})= >{ // console.log(match,location); Return the pathname = = = "/" | | the pathname = = = "/ home" | | the pathname = = = "/ index"}} > home page</NavLink>
      <span> | </span>
      <NavLink to="/about">about</NavLink>
      <span> | </span>
      <NavLink to="/join">join</NavLink>
      <span> | </span>
      <NavLink to="/list">The list of</NavLink>
    </nav>
  );
}

Copy the code

  • Routing parameters

    • History:
      • Action:
        1. PUSH: Users enter via Link or NavLink components, or history. PUSH
        2. POP: Users enter by typing the URL directly into the address bar. : The history.pop() method does not exist
        3. REPLACE: Redirect into or enter through history.replace. !!!!!!!!! : only replaces the content in history, but does not increase the length of history
      • Length: The number of entries stored in the history of the current source, i.e. the length of the history array
      • Go :go(n) : if the value is negative, the number of directories will be forwarded; if the value is positive, the number of directories will be forwarded
      • GoBack: goBack() returns one step to history
      • GoForward: goForward() advances to the next step in history
    • location
      • Hash: “” Hash value in the URL
      • Pathname: “” Current URL
      • Search: “” Current search
      • State: information passed by push or repalce
    • match
      • Params – (object) key/value pairs resolved from the URL corresponding to the dynamic segment of the path
      • IsExact – (Boolean value) Indicates whether the current route matches exactly
      • Path – (string) Current path
      • Url – (string) The part of the URL that path matches

  • Switch

    The Switch component matches the first url that matches the rule: The matching URL must be set to an exact match so that all urls that do not match are redirected to the 404 page

          <Switch>
        <Route
          path={["/", "/index", "/home"]}
          exact
          component={HomeView}
        />
        <Route path="/about" exact strict component={AboutView} />
        <Route path="/about/details"   component={AboutDetails} />
        <Route path="/join" exact component={JoinView} />
        <Route path={"/list/:type? /:page?" }exact component={List} />

        <Route path="/ 404" exact component={UndefindedView} />
        <Redirect to="/ 404" />
      </Switch>
Copy the code

  • Redirect

    Redirect to the specified path. That is, change the URL of the address bar when jumping to the path specified by Route.

            <Route path="/ 404" exact component={UndefindedView} />
        <Redirect to="/ 404" />
Copy the code

  • hooks

    • UseHistory (): Obtains history information
    • UseLocation () : Gets location information
    • useParams() === match.params
    • useRouteMatch()