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

是否可以将 @ reach /路由器与 redux-first-history 结合使用？因为我遇到了同样的问题，并且可以通过对historyContext进行以下配置来解决此问题：

import { globalHistory } from "@reach/router";
// other imports

const historyContext = createReduxHistoryContext({
   // your options...
   reachGlobalHistory: globalHistory // <-- this option is the important one that fixed my issue
}

在README of redux-first-history

中对此有更多了解

Answer 2

当我刚开始接触Reach Router时，我也会遇到相同的问题。幸运的是，不久后找到了解决方案。

navigate的内部到达路由器文档中指出：

Navigate返回一个诺言，因此您可以等待它。它可以在React完全完成渲染下一个屏幕后解析，即使使用React Suspense。

因此，请使用await navigate()为我工作。

import React, {useEffect} from 'react';
import {useStoreState} from "easy-peasy";
import {useNavigate} from "@reach/router";

export default function Home() {
    const {isAuthenticated} = useStoreState(state => state.auth)
    const navigate = useNavigate()

    useEffect(()=> {
        async function navigateToLogin() {
            await navigate('login')
        }
        if (!isAuthenticated) {
            navigateToLogin()
        }
    },[navigate,isAuthenticated])

    return <div>Home page</div>
}

Answer 3

我遇到了一个<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;
};

Answer 4

尝试使用 gatsby 导航。它使用到达路由器。解决了我的问题

从'gatsby'导入{导航}

到达路由器导航更新URL，但不包含组件

4 个答案: