如何在 next.js 中实现带有重定向的链接？答案

【问题标题】：How to implement links with redirect in next.js?如何在 next.js 中实现带有重定向的链接？
【发布时间】：2019-12-04 03:50:02
【问题描述】：

我尝试在 next.js 中实现以下反应组件。

反应组件：

import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";

import Dashboard from "../../pages/dashboard";
import Profile from "../../pages/profile";

function Layout(props) {
  return (
     <>
       <Switch>
          <Route
              exact
              path="/"
              render={() => <Redirect to="/app/dashboard" />}
           />
           <Route path="/app/dashboard" component={Dashboard} />
           <Route path="/app/profile" component={Profile} />
       </Switch>
     </>
 );
}

export default withRouter(Layout);

因为我对下一个很陌生。 j的，我不确定，如何在next.js中处理带有redirect的路由，类似于上面的react组件代码。

有什么帮助吗？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您正在使用带有 NextJS 的 React-Router，这是可能的，但不是最佳实践。
NextJS 路由器是一个相当复杂的东西，因为它同时处理客户端和服务器端路由。
您的 /app/dashboard 和 /app/profile 页面应该正确呈现。如果要将/ 重定向到/app/dashboard，可以在pages/index.js 文件的getInitialProps 中使用this trick。

【讨论】：