Question

我想获取历史记录的值并在this.props.Iam中使用next / router导入不带任何输入的内容。我想使用this.props.match.params在url中获取值，并使用history.push进行重定向。如何在next.js中获得它。 Rightnoe我无法在此道具中获取历史记录和比赛信息。

Answer 1

编辑：由于全球路由器对象的污染是不是你做的，你可以使用一个状态变量，而不是：

const EXCEPTIONS = ['/sign-up'];

/**
 * Saves the current URL before changing the route.
 */
const useRouteUrlHistory = () => {
  const [previousRoute, setPreviousRouter] = useState('');
  const router = useRouter();

  const handleBeforeHistoryChange = (url) => {
    const [nextUrl] = url?.split('?') || [];

    if (
      !(EXCEPTIONS.includes(nextUrl) || EXCEPTIONS.includes(router.asPath)) &&
      nextUrl !== router.asPath
    ) {
      setPreviousRouter(router.asPath);
    }
  };

  useEffect(() => {
    router.events.on('beforeHistoryChange', handleBeforeHistoryChange);

    return () => {
      router.events.off('beforeHistoryChange', handleBeforeHistoryChange);
    };
  }, []);

  return { previousRoute };
};

export default useRouteUrlHistory;

您有，因为你听路由变化和想要保存/访问使用挂钩，在_app.js的previousRoute全球。

const MyApp = ({ Component, pageProps }) => {

  const { previousRoute } = useRouteUrlHistory();

  return (
        <ApplicationContext.Provider
          value={{
            previousRoute,
            ... another global context
          }}
        >
           ... components etc.
        </ApplicationContext.Provider>

======

我还没有找到一种优雅的方式，以便能够访问Router.history其全文。但往往不够，我想访问至少最近访问过的路线，这迫使我这个解决方法。它可能不是最优雅的方式，因为它污染了全球路由器对象，但正如我说，我还没有发现任何替代。

我只检查其以前访问过的实际路线。你也可以实现你的逻辑来检查PARAMS。挂钩插头，在路由器处理实际路由改变之前。它允许你在你听Router.previousRoute属性的应用程序。

记住，如果这样做shallow Routing你可以不影响Router.history，这将可能不会触发该事件钩。

const EXCEPTIONS = ['/sign-up'];

/**
 * Saves the current URL before changing the route.
 * The previousRoute is then accessible via the global Router.
 */
const useRouteUrlHistory = () => {
  const handleBeforeHistoryChange = (url) => {
    const [nextUrl] = url?.split('?') || [];

    if (
      !(EXCEPTIONS.includes(nextUrl) || EXCEPTIONS.includes(Router.asPath)) &&
      nextUrl !== Router.asPath
    ) {
      Router.previousRoute = Router.asPath;
    }
  };

  useEffect(() => {
    Router.events.on('beforeHistoryChange', handleBeforeHistoryChange);

    return () => {
      Router.events.off('beforeHistoryChange', handleBeforeHistoryChange);
    };
  }, []);
};

export default useRouteUrlHistory;

Answer 2

您也可以使用路由器

import Router from 'next/router'
// on Submit handler
Router.push(url)

其中url是您要重定向到的页面。

Router API

Answer 3

next/router不能像react-dom-router那样为您提供历史记录，它可以为您的组件props中的查询提供内容。

这是官方usage example。

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

如果您想推路线，可以遵循这一条。 example。

import Router from 'next/router'

function ReadMore() {
  return (
    <div>
      Click <span onClick={() => Router.push('/about')}>here</span> to read more
    </div>
  )
}

export default ReadMore

如何获取历史记录并在nextjs中的this.props中进行匹配？

3 个答案: