React-Router Hooks

Route

写法1

<Route path="/child">
  <Child />
</Route>
// 类似
<Route path="/child" children={<Child />}></Route>

children 组件使用一个特殊的 children prop 来将 Route 的子组件传递到渲染结果中。

写法2

<Route path="/child" component={Child}></Route>

component 属性引用一个 React 组件，可以是函数组件或者类组件。

写法3

<Route path="/child" render={() => (<div>Child</div>)}></Route>
// 类似写法2
<Route path="/child" component={() => (<div>Child</div>)}></Route>
// 类似写法1
<Route path="/child" children={<div>Child</div>}></Route>

render 这对于内联渲染很方便。具有 render prop 的组件接受一个函数，该函数返回一个 React 元素。

Hooks

React Router附带了一些挂钩，在组件内部调用这些钩子可以访问路由的状态。（React >= 16.8）

1、useHistory
2、useLocation
3、useParams
4、useRouteMatch

---

useHistory 该钩子提供对 history 对象的访问。 使用方法与使用props.history相同。

function HomeButton(props) {
  let history = props.history;

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

新代码

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

---

useLocation 该挂钩提供对 location 对象的访问，这对于需要了解当前URL的任何组件很有用。

const LinkToFaqComponent = (props) => {
  return (
    <Link to=`${props.location.pathname}/faq`>
      Read Our FAQ Here!
    </Link>
  )
}

export const LinkToFaq = withRouter(LinkToFaqComponent)

新代码

const LinkToFaqComponent = (props) => {
  return (
    <Link to=`${props.location.pathname}/faq`>
      Read Our FAQ Here!
    </Link>
  )
}

export const LinkToFaq = withRouter(LinkToFaqComponent)

---

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

// Component A:
const ComponentA = (props) => {
  const { id } = props.match.params;
  return <ComponentB id={id} />;
}
export const RoutedComponentA = withRouter(ComponentA);

// Component B:
const ComponentB = (props) => (<div>My ID is: {props.id}</div>);

新代码

const ComponentA = () => {
  return <ComponentB />;
}

// Component B:
const ComponentB = () => {
  const { id } = useParams();
  return (<div>My ID is: {id}</div>);
}

---

useRouteMatch 当您只需要路由匹配数据而无需实际渲染路由时，可以使用此钩子。

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // 你只想在匹配的URL但是不渲染任何内容
        return <div />;
      }}
    />
  );
}
import { useRouteMatch } from "react-router-dom";

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // 你只想在匹配的URL但是不渲染任何内容
  return <div />;
}

---