react router -- Hooks

react router之Hooks

Hooks

React Router带有几个钩子,允许你访问路由器的状态并从组件内部执行导航
note:需要使用React>=16.8版本才能使用这些钩子!

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

一、useHistory

useHistory钩子允许你访问可用于导航的历史实例

按官网原代码书写:

function HomeButton() {
    let history = useHistory();
    
    function handleClick() {
        history.push("/home");
        //console.log(history);
    }
    function BackClick() {
        history.goBack();
        //console.log(history);
    }
    return (
        <div>
            <button type="button" onClick={handleClick}>Go Home</button>
            <button type="button" onClick={BackClick}>Go Back</button>  //自己增加的
        </div>
    )
}

ReactDOM.render(
    <Router>
        <HomeButton/>
    </Router>,
    document.getElementById("root")
)

点击按钮Go Home后,浏览器本地url会进入到/home,如图所示:
在这里插入图片描述
这里点击Go Home之后,console.log了一下history,内容如下图所示:
在这里插入图片描述
点击Go Back后会返回上一页,如图所示:
在这里插入图片描述
这里点击Go Back之后,console.log了一下history,内容如下图所示:
在这里插入图片描述
二、useLocation

– useLocation钩子返回表示当前URL的location对象。您可以将其视为useState,它在URL更改时返回新位置。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
  Link
} from "react-router-dom";

function Name() {
  let location = useLocation();
  // console.log(location);
  let name = location.pathname;
  return <div>the location.pathname is:{name}</div>
}

ReactDOM.render(
  <Router>
    <div>
      <ul>
        <li><Link to="/xiaoming">Xiao Ming</Link></li>
        <li><Link to="/zhangsan">Zhang San</Link></li>
      </ul>
      <Switch>
        <Route path="/:name">
        	<Name />
        </Route>
      </Switch>
    </div>
  </Router>,
  document.getElementById("root")
);

效果如下图所示:
在这里插入图片描述
点击li,如点击Xiao Ming(Zhan San同理):
在这里插入图片描述
console.log(useLocation())的结果:
在这里插入图片描述
三、useParams

useParams返回URL参数的键/值对的对象。使用它访问当前<Route>的match.params。

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

function HomePage() {
    return <div>home</div>
}

function BlogPost() {
    // console.log(useParams())
    let { fruit } = useParams();  // es6解构赋值
    return <div>My favorite fruit is {fruit}</div>;
}

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/">
                <HomePage />
            </Route>
            <Route path="/:fruit">
                <BlogPost />
            </Route>
        </Switch>
    </Router>,
    document.getElementById('root')
);

初步进入的效果样式:
在这里插入图片描述
在浏览器地址栏里输入:/apple
在这里插入图片描述
console.log(useParams())的结果:
在这里插入图片描述
四、useRouteMatch

useRouteMatch钩子尝试以与<Route>相同的方式匹配当前URL。它主要用于访问匹配数据而不实际呈现<Route>。

before:

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

ReactDOM.render(
    <Router>
        <div>
            <Switch>
                <Route
                    path="/:name"
                    render={({match})=>{
                        // console.log(match);
                        return <div>before</div>
                    }}
                ></Route>
            </Switch>
        </div>
    </Router>,
    document.getElementById("root")
);

在浏览器地址栏里输入:/xiaohua
在这里插入图片描述
console.log(match)结果:
在这里插入图片描述
after:

import React from "react";
import ReactDOM from "react-dom";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    useRouteMatch,
    Link
} from "react-router-dom";

// after
function BlogPost() {
    let match = useRouteMatch("/:name");
    // console.log(match);
    return <div>after</div>;
  }

ReactDOM.render(
    <Router>
        <div>
            <BlogPost/>
        </div>
    </Router>,
    document.getElementById("root")
);

在浏览器地址栏里输入:/yaya
在这里插入图片描述
console.log(match)结果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页