[英]How to implement links with redirect in next.js?
I have the following react component which I am trying to implement in next.js.我有以下反应组件,我试图在 next.js 中实现。
React component:反应组件:
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);
As I am very new to next.因为我对下一个很陌生。 j's, I am not sure on, how can I handle the routes with redirect in next.js similar to above react component code.
j's,我不确定,如何在 next.js 中处理带有重定向的路由,类似于上面的反应组件代码。
Any help is appreciated?任何帮助表示赞赏?
You are using React-Router with NextJS which is possible but not the best practice.您正在将 React-Router 与 NextJS 一起使用,这是可能的,但不是最佳实践。
NextJS router is a pretty complicated thing as it handles ClientSide and ServerSide routing simultaneously. NextJS 路由器是一个相当复杂的东西,因为它同时处理客户端和服务器端路由。
your /app/dashboard
and /app/profile
pages should render properly.您的
/app/dashboard
和/app/profile
页面应该正确呈现。 If you want to redirect /
to /app/dashboard
you can use this trick inside the getInitialProps
of the pages/index.js
file.如果你想将
/
重定向到/app/dashboard
,你可以在pages/index.js
文件的getInitialProps
中使用这个技巧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.