react-router-dom中的适用於function component的hook函式，在上一篇已经有使用到
useHistory回传的方法来进行转址。

而本篇内容则是要学习如何获取当前画面上的路由资讯，可以用在转址後子元件的资料判断等等。

useLocation

useLocation可以获取当前路由的资讯(loaction)

我宣告一个'ifo'常数接收useLocation()回传的路由资讯

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

function Home(){
const ifo= useLocation()

 console.log(ifo)//看useLocation()回传什麽资讯

    return(
    <div className="wrapper">
        <h1>Home</h1>
    </div>
    )
}

export default Home;

此时网址列的url为

http://localhost:3001/home

console.log看一下物件里面会提供什麽资讯：

• hash：从#开始的url
• pathname：url的当前路径
• search:：当前url 搜寻的表达形式(问号 ? 之後的部分)
• key：用於这个路由Location的唯一识别
• state：从连结中设定转入的资料

以上这些值除了key以外，都是可以自己设定的喔！

在哪设定？这就提到前面几先篇提到方法Link、NavLink、Redirect之中的to属性

to传入路由物件

将url转向指定的path，to属性除了以字串形型态传入'path'以外，还可以以物件型态传入，物件中甚至可以加上state，藉由转换路由的过程传送资讯让其他元件可以使用。

这里拿NavLink做范例

		<NavLink to={
									pathname: "/loaction", 
							    search: "?sort=name",　
							    hash: "#hash", 
							    state: { text: "state的文字",hello: true } 
								}
>location</NavLink>

当我点击这个连结转址後，使用useLocation获得路由资讯

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

function Location(){
const ifo= useLocation()

 console.log(ifo)

    return(
    <div className="wrapper">
        <h1>useLocation的state:</h1>
        <p>{ifo.state.text}</p>
    </div>
    )
}

export default Location;

网址列

http://localhost:3001/location?sort=name#hash

接收到的物件

我们就可以把传入的state使用在元件上

useParams

当我们路由路径使用动态参数 :id 呈现，可以利用useParams取得url上的id值。

假如当前url是 "/home/456"

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

const urlId = useParams()

console.log(urlId) //得到456

useRouteMatch

useRouteMatch()不给参数的话，会回传match物件，
而在useRouteMatch()的参数中传入路径（"/home"，或{path:"/home"}），
则可以确认参数与当前url是否相同。

相同：返回match的物件

不相同：返回null

可以利用match确认当前在哪个路由，判断显示不同资料或元件

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

function App(){
 
 const match =useRouteMatch('/home')
 console.log(match)
    return(
    <div className="App">
			<div>{match?'我在首页':'我在Location'}</div>  //确认是否路由是否匹配
        
			<NavLink to="/home" >首页</NavLink>
      <NavLink to="/loaction">Location</NavLink>
    </div>

					<Route  path='/home' component={Home} />
          <Route  path='/location' component={Location} />
    )
}

export default App;

在/home

在/locaction