The Hooks of React Router

React Router v5 introduces a powerful Hook mechanism, providing four convenient routing hooks, simplifying routing management. This article will quickly get started with the new mode of React Router v5, first introducing the new routing rendering mode, and then delving into the use of each Hook.

React Router before v5

 // Render the route and get the route attributes<route component="{Home}" path="/"></route>

// Pass extra properties<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile> } /></route>

When using component syntax, routing properties ( match , location , and history ) are implicitly passed to the component. But if you need to pass additional properties, you must use render property instead. It should be noted that adding inline functions to the component syntax will cause the component to remount each time it is rendered.

React Router after v5

<route path="/"><home></home></route>

Home component no longer implicitly receives routing properties. However, you can add any extra properties to Home component without modifying Route itself. Avoid the problem of remounting components every time they render, which is a more concise and efficient API design.

Since routing properties are no longer implicitly passed, how to access match , history , or location ? Do I need to wrap all components with withRouter ? This is where the Hook comes into play.

Note that the Hook was introduced in React 16.8, so React is required to be used.

useHistory Hook

• Provides access to history attributes in React Router.
• Points to history package dependencies used by the route.
• It is mainly used for programmatic routing through functions, such as push , replace , etc.

 import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();
  return <button onclick="{()">history.push('/profile')}>Profile</button> ;
}

useLocation Hook

• Provides access to location attribute in the React Router.
• Similar to the browser's window.location , but it represents the routing status and location and can be accessed anywhere.
• Mainly used to access query parameters or complete routing strings.

 import { useLocation } from 'react-router-dom';

function Profile() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    // ... Use currentPath and searchParams
  }, [location]);
  Return<p> Profile</p> ;
}

Since location property is immutable, useEffect calls the function every time the route changes, which is great for manipulating search parameters or current paths.

useParams Hook

• Provides access to parameters in the URL.
• This feature was previously only implemented through match.params .

 import { useParams, Route } from 'react-router-dom';

function Profile() {
  const { name } = useParams();
  Return<p> {name}'s Profile</p> ;
}

function Dashboard() {
  Return (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch Hook

• Provides access to match objects.
• If there is no argument, the closest match in the component or its parent component is returned.
• Mainly used to build nested paths.

 import { useRouteMatch, Route } from 'react-router-dom';

function Auth() {
  const match = useRouteMatch();
  Return (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch can also be used to access match objects without rendering Route by passing location parameters.

For example, suppose you need to render your profile in /profile , and if the URL contains the person's name ( /profile/dan or /profile/ann ), render the profile of others. If you don't use a Hook, you need to write a Switch , list two routes and customize with props. But now, using Hook can do this:

 import { Route, BrowserRouter as Router, Link, useRouteMatch } from 'react-router-dom';

function Profile() {
  const match = useRouteMatch('/profile/:name');
  return match?<p> {match.params.name}'s Profile</p> :<p> My own profile</p> ;
}

export default function App() {
  Return (
    <router>
      <nav>
        <link to="/profile">My Profile
        <br>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

You can also pass all Route properties like exact or sensitive as objects to useRouteMatch .

Summarize

Hook and explicit Route themselves have hidden advantages. These Hooks help avoid much of the confusion and complexity that emerged in early modes, reduce human errors, make routing code easier to maintain, and easier to upgrade to the new React Router version.

The above is the detailed content of The Hooks of React Router. For more information, please follow other related articles on the PHP Chinese website!