React Router v5.1 nâng cấp mới: useParams, useLocation, useHistory, useRoute (ok)

https://viblo.asia/p/react-router-v51-version-moi-voi-nhung-nang-cap-moi-useparams-uselocation-usehistory-useroutematch-maGK7O8LKj2

Đọc thêm: https://blog.logrocket.com/react-router-hooks-will-make-your-component-cleaner/

Với React router v4, nếu chúng ta muốn lấy thông tin từ các params , chúng ta phải lấy chúng từ props của component thông qua các Route hoặc thông qua phương thức render prop trong Route như sau:

useParams

Cách 1: Lấy :slug trên đường dẫn :)

Cách 2: Lấy :slug trên đường dẫn :)

C:\Users\Administrator\Desktop\test\src\App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function BlogPost({match}) {
  let {slug} = match.params;
  console.log(slug);
  return null;
}
const Component = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/posts/:slug" render={( { match } ) => <BlogPost match={ match } />} />
        </Switch>
      </div>
    </Router>
  );
};
export default Component;

Và nếu chúng ta muốn sử dụng nó trong các child components, chúng ta phải pass nó xuống các props của các child components. Tuy nhiên, đổi với React router v5.1, chúng ta chỉ cần sử dụng useParams:

C:\Users\Administrator\Desktop\test\src\App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom';
function BlogPost() {
  let { slug } = useParams();
  console.log(slug);
  return null;
}
const Component = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/posts/:slug" render={( { match } ) => <BlogPost match={ match } />} />
        </Switch>
      </div>
    </Router>
  );
};
export default Component;

useLocation

useLocation sẽ trả về location object hiện tại. Nó sẽ giúp ích trong trường hợp chúng ta muốn lấy thông tin từ URL hiện tại. Ví dụ như, bạn muốn gửi một sự kiện "page view" đến một analytics service mỗi khi URL thay đổi. Với useLocation, bạn chỉ cần làm như sau:

C:\Users\Administrator\Desktop\test\src\App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation, useParams  } from 'react-router-dom';
function BlogPost() {
  let  location  = useLocation()
  console.log(location);
  return null;
}
const Component = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/posts/:slug" component={BlogPost} />
        </Switch>
      </div>
    </Router>
  );
};
export default Component;

useHistory

Hook useHistory cung cấp cho bạn quyền truy cập vào phiên bản lịch sử mà bạn có thể sử dụng để điều hướng.

C:\Users\Administrator\Desktop\test\src\App.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from "./Home";
const App = () => {
  return (
    <Router>
      <Route path="/" component={Home}></Route>
    </Router>
  );
};
export default App;

C:\Users\Administrator\Desktop\test\src\Home.js

import { useHistory } from "react-router-dom";
function HomeButton() {
  let history = useHistory();
  console.log(history);
  function handleClick1() {
    history.push("/user");
  }
  function handleClick2() {
    history.push("/about");
  }
  return (
  	<>
	    <button type="button" onClick={handleClick1}>
	      Go User
	    </button>
      <button type="button" onClick={handleClick2}>
        Go About
      </button>
    </>
  );
}
export default HomeButton;

C:\Users\Administrator\Desktop\test\src\User.js

import { useHistory } from "react-router-dom";
function UserButton() {
  let history = useHistory();
  function handleClick1() {
    history.push("/");
  }
  function handleClick2() {
    history.push("/about");
  }
  return (
  	<>
	    <button type="button" onClick={handleClick1}>
	      Go Home
	    </button>
	    <button type="button" onClick={handleClick2}>
	      Go About
	    </button>
    </>
  );
}
export default UserButton;

C:\Users\Administrator\Desktop\test\src\About.js

import { useHistory } from "react-router-dom";
function UserButton() {
  return (
  	<>
	    About
    </>
  );
}
export default UserButton;

useRouteMatch

Trường hợp chưa sử dụng useRouteMatch

Đôi khi, bạn cần sử dụng thành phần chỉ để truy cập vào một đối tượng khớp.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch
} from "react-router-dom";
function Post() {
  return (
    <Route
      path="/post/:slug"
      render={({ match }) => {
        return (
          <div>
            Your current path: <strong>{match.path}</strong>
          </div>
        );
      }}
    />
  );
}
function App() {
  return (
    <Router>
      <Route path="/post">
        <Post />
      </Route>
    </Router>
  )
}
export default App

Trường hợp sử dụng useRouteMatch

Ví dụ trên cho thấy một cách để truy cập đối tượng khớp mà không cần sử dụng thành phần hoặc kết xuất đạo cụ. Với phiên bản mới nhất của React Router, bạn cũng có thể sử dụng hook useRouteMatch, cho phép bạn lấy đối tượng match và sử dụng nó bên trong thành phần của mình mà không cần sử dụng .

C:\Users\Administrator\Desktop\test\src\App.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch
} from "react-router-dom";
function Post() {
  return (
    <Route
      path="/post/:slug"
      render={({ match }) => {
        return (
          <div>
            Your current path: <strong>{match.path}</strong>
          </div>
        );
      }}
    />
  );
}
function Users() {
  let match = useRouteMatch("/users/:id/:hash");
  return (
    <div>
      In React Router v5, You can use useRouteMatch to get match object. <br /> Current match path: <strong>{match.path}</strong> 
    </div> 
  ); 
}
function App() {
  return (
    <Router>
      <Route path="/post">
        <Post />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
    </Router>
  )
}
export default App

Giới thiệu

Chúng ta có thể thấy rằng React hooks đang dần trở thành một thứ không thể thiếu trong tất cả các framework, các thư viện React hiện nay. Đây quả là một ý tưởng cực kì thành công của Facebook. Và React Router cũng không ngoại lệ với những nâng cấp đáng kể trong version 5.1. Vậy React Router v5.1 có gì mới, chúng ta hãy cũng điểm qua nhé!

Hook APIs

useParams

Với React router v4, nếu chúng ta muốn lấy thông tin từ các params , chúng ta phải lấy chúng từ props của component thông qua các Route hoặc thông qua phương thức render prop trong Route như sau:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// In the code below, BlogPost is used as both a <Route component>
// and in a <Route render> function. In both cases, it receives a `match`
// prop, which it uses to get the URL params.
function BlogPost({ match }) {
  let { slug } = match.params
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* Using the `component` prop */}
        <Route path="/blog/:slug" component={BlogPost} />

        {/* Using the `render` prop */}
        <Route
          path="/posts/:slug"
          render={({ match }) => <BlogPost match={match} />}
        />
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)

Và nếu chúng ta muốn sử dụng nó trong các child components, chúng ta phải pass nó xuống các props của các child components. Tuy nhiên, đổi với React router v5.1, chúng ta chỉ cần sử dụng useParams:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function BlogPost() {
  // We can call useParams() here to get the params,
  // or in any child element as well!
  let { slug } = useParams()
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* No weird props here, just use
            regular `children` elements! */}
        <Route path="/posts/:slug">
          <BlogPost />
        </Route>
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)

useLocation

useLocation sẽ trả về location object hiện tại. Nó sẽ giúp ích trong trường hợp chúng ta muốn lấy thông tin từ URL hiện tại. Ví dụ như, bạn muốn gửi một sự kiện "page view" đến một analytics service mỗi khi URL thay đổi. Với useLocation, bạn chỉ cần làm như sau:

import { Switch, useLocation } from 'react-router'

function usePageViews() {
  let location = useLocation()

  useEffect(
    () => {
      ga.send(['pageview', location.pathname])
    },
    [location]
  )
}

function App() {
  usePageViews()
  return <Switch>{/* your routes here */}</Switch>
}

useHistory

Nếu bạn muốn sử dụng history object cho các tác vụ điều hướng trong trang, bạn có thể sử dụng useHistory hook như sau:

import { useHistory } from 'react-router'

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Trong tương lai, React Router sẽ cung cấp thêm cho chúng ta useNavigate hook, dành riêng cho các tác vụ điều hướng trong trang một cách thuận tiện hơn.

useRouteMatch

Cuối cùng là useRouteMatch hook. Nó sẽ giúp ích khi chúng ta muốn sử dụng Route chỉ để get match param. Thay vì sử dụng Route, chúng ta có thể sử dụng useRouteMatch:

// before
import { Route } from 'react-router'

function App() {
  return (
    <div>
      {/* ... */}
      <Route
        path="/BLOG/:slug/"
        strict
        sensitive
        render={({ match }) => {
          return match ? <BlogPost match={match} /> : <NotFound />
        }}
      />
    </div>
  )
}

// after
import { useRouteMatch } from 'react-router'

function App() {
  let match = useRouteMatch({
    path: '/BLOG/:slug/',
    strict: true,
    sensitive: true
  })

  return (
    <div>
      {/* ... */}
      {match ? <BlogPost match={match} /> : <NotFound />}
    </div>
  )
}

Cũng như Route, nếu chúng ta bỏ qua path prop, hook này sẽ trả về giá trị match của Route gần nhất.

Tổng kết

Như vậy, chúng ta đã cùng điểm qua những nâng cấp mới của React Router v5.1, chủ yếu là các hooks. Các bạn có thể sử dụng nó ngay bây giờ hoặc chờ đợi một phiên bản nâng cấp hơn là React Router v6, nghe bảo là sẽ có trong đầu năm sau 2020 đấy nhé. Chúc các bạn thành công ^^

Tham khảo

React Router v5.1ReactTraining.com

React Router hooks will make your component cleaner

February 24, 2020 4 min read

React Router is a lightweight library that allows you to manage and handle routing for your React application.

Among the most prominent features of React Router are route render methods, which enable your component to access match, location, and history props. Together, these props are used to pass data from URL to component and navigate your React application programmatically.

For example, if you’d like to create a back button, you can use the goBack() function from history props. This abstracts away the differences in various environments or web browsers so you can go back to the previous webpage in a simple function.

// a Route with component props
<Route path="/post/:number" component={Post} />

// The component itself
function Post(props) {
  return (
    <div>
      In React Router v4, you get the history object from props. <br />
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

Although this works fine, the route render method is widely considered hard to read and just plain weird. That’s why, starting with version 5.1, React Router will include four useful hooks you can use to write clean, neatly stacked navigation components that please the eye. I’ll show you how these new hooks work by comparing them to the old patterns in version 4.

We’ll start with the useParams hook.

UseParams

The useParams hook will return an object of key/value pairs from your application URL that is set to be dynamic. In a complex application, it’s common to have many navigation links that are dynamic.

For example, you may have a /post/:id URL that also initiates a fetch process to your application’s backend. In this case, the most common React Router pattern would be to use a component prop.

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/post/hello-world">First Post</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/post/:slug" component={Post} />
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

By passing the Post component into the /post/:number Route component, you can extract the params object from the match prop that is passed by React Router into the Post component.

// Old way to fetch parameters
function Post({ match }) {
  let params = match.params;
  return (
    <div>
      In React Router v4, you get parameters from the props. Current parameter
      is <strong>{params.slug}</strong>
    </div>
  );
}

This method works just fine, but it’s quite cumbersome if you have a big application with lots of dynamic routes. You have to keep track of which Route components need component props and which do not. Also, since the match object is passed from Route into the rendered component, you will need to pass them along to components further down the DOM tree.

This is where the useParams hook really shines. It’s a neat helper function that gives you the parameters of the current route so you don’t have to use the component props pattern.

<Switch>
  <Route path="/post/:slug" component={Post} />
  <Route path="/users/:id/:hash">
    <Users />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

function Users() {
  let params = useParams();
  return (
    <div>
      In React Router v5, You can use hooks to get parameters.
      <br />
      Current id parameter is <strong>{params.id}</strong>
      <br />
      Current hash parameter is <strong>{params.hash}</strong>
    </div>
  );
}

If a child component of Users need access to the parameters, you can simply call useParams() there as well.

Here’s an example if you’d like to see it in action.

UseLocation

In React Router version 4, just like fetching parameters, you had to use the component props pattern to gain access to a location object.

<Route path="/post/:number" component={Post} />

function Post(props) {
  return (
    <div>
      In React Router v4, you get the location object from props. <br />
      Current pathname: <strong>{props.location.pathname}</strong>
    </div>
  );
}

With version 5.1, you can call the useLocation hook to get the location object from React Router.

<Route path="/users/:id/:password">
  <Users />
</Route>

// new way to fetch location with hooks
function Users() {
  let location = useLocation();
  return (
    <div>
      In React Router v5, You can use hooks to get location object.
      <br />
      Current pathname: <strong>{location.pathname}</strong>
    </div>
  );
}

Again, you can see the sample code on CodeSandbox.

UseHistory

That gives us one less reason to use component props. But don’t you still need to use the component or render pattern to get the history object?

The history object is the last reason why you need to use component or render props pattern.

<Route path="/post/:slug" component={Post} />

// Old way to fetch history
function Post(props) {
  return (
    <div>
      In React Router v4, you get the history object from props. <br />
      <button type="button" onClick={() => props.history.goBack()}>
        Go back
      </button>
    </div>
  );
}

By using the useHistory hook, you can get the same history object without needing the Route component to pass it down.

<Route path="/users/:id/:hash">
  <Users />
</Route>

// new way to fetch history with hooks
function Users() {
  let history = useHistory();
  return (
    <div>
      In React Router v5, You can use hooks to get history object.
      <br />
      <button type="button" onClick={() => history.goBack()}>
        Go back
      </button>
    </div>
  );
}

See this sample code for a comparison between useHistory and regular history props.

Now you can have a clean routing component without any weird component compositions that use component or render props. You can simply put a <Route> component with path props and place the rendered children component inside it.

useRouteMatch

Sometimes, you need to use the <Route> component just to get access to a match object.

<Route path="/post">
  <Post />
</Route>

function Post() {
  return (
    <Route
      path="/post/:slug"
      render={({ match }) => {
        return (
          <div>
            Your current path: <strong>{match.path}</strong>
          </div>
        );
      }}
    />
  );
}

The example above shows one way to access a match object without using the component or render props. With the latest version of React Router, you can also use the useRouteMatch hook, which enables you to grab the match object and use it inside your component without using <Route>.

<Route path="/users">
  <Users />
</Route>

// useRouteMatch to make your route above cleaner
function Users() {
  let match = useRouteMatch("/users/:id/:hash");
  return (
    <div>
      In React Router v5, You can use useRouteMatch to get match object. <br /> Current match path: <strong>{match.path}</strong> </div> ); }

Now you won’t need to create a <Route> component just to grab a match object. Here’s another example for you to mess around with.

Conclusion

The React Router team harnessed the power of hooks and implemented it to share logic across components without the need to pass it down from from the top of the tree.

If you’d like to refactor your component with these new hooks, you can start by updating components that use match, location, or history objects.

// before
function userComponent({ match, location, history }) {
  let { slug } = match.params
  // ...
}

// after
function userComponent() {
  let { slug } = useParams()
  let location = useLocation()
  let history = useHistory()
  // ...
}

After that, you can update the weird-looking <Route> components you might have in your navigation component.

// before
<Switch>
  <Route path="/user/:id" component={userComponent} />
</Switch>

// after
<Switch>
  <Route path="/user/:id">
    <userComponent />
  </Route>
</Switch>

What do you think about React Router hooks? Share your comments below.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.