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

Question

我有以下反应组件，我试图在 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's，我不确定，如何在 next.js 中处理带有重定向的路由，类似于上面的反应组件代码。

任何帮助表示赞赏？

Answer 1

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