Day26 React Router useLocation

useLocation 函数是当 URL 网址改变时useState()会返回一个新的包含有关目前URL的状态和位置的物件函数。每当URL网址有变更，则 useLocation 资讯也将更新。

延续昨天的实作，加入了useLocation()，在网页中加了{location.pathname}可以显示出目前URL网圵列的资讯，当URL网址中的参数有变更时，网页中的locationpath资讯也会随着变更，另外再加上一个判别式，如果locationPath中的参数和URL网圵列上所输入的参数一致就会跳出Alert视窗。

step1:先导入'react-router-dom'

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

step2:将useLocation();指定给变数location，然後就可用location.pathname显示出URL的数据

User.jsx

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



const User = () => {

    const {name , Jeff} = useParams();
    const location = useLocation();    

    return (
        <div>
            <h1>This is {name} {Jeff} Page</h1>
            <p>This is current location : " {location.pathname} "</p>
            {location.pathname ===`/user/name/Jeff` ? (
                alert("The Urlpath is correct")
                ) : null }
        </div>
    )
};


export default User;