到达路由器导航更新 URL 但不是组件

Question

我正在尝试让 Reach Router 从我的一个组件以编程方式导航。URL 已按预期更新，但未呈现路由，如果我查看 React 开发人员工具，我可以看到原始组件被列为正在显示。

如果我在新 URL 处刷新页面一次，则它会正确呈现。

我怎样才能让它渲染新路线？

下面显示了一个简化的示例，我正在使用@reach/router@1.2.1它（我使用 Redux 也可能很突出）。

import React from 'react';

import { navigate } from '@reach/router';

const ExampleComponent = props => {
  navigate('/a/different/url');

  return <div />;
};

export default ExampleComponent;

Answer 1

我在使用路线组件时遇到了同样的问题<NotFound defualt />。

这会改变 URL，但 React 本身没有改变：

import React from "react";
import { RouteComponentProps, navigate } from "@reach/router";

interface INotFoundProps extends RouteComponentProps {}

export const NotFound: React.FC<INotFoundProps> = props => {
  // For that it's worth, neither of these worked 
  // as I would have expected
  if (props.navigate !== undefined) {
    props.navigate("/");
  }
  // ...or...
  navigate("/", { replace: true });

  return null;
};

这会更改 URL 并呈现新的路由，正如我所期望的：

...
export const NotFound: React.FC<INotFoundProps> = props => {
  React.useEffect(() => {
    navigate("/", { replace: true });
  }, []);

  return null;
};