应在react中何时调用Redirect

Question

我的react组件应该如下工作：

1. 检查全局变量是否有错误，如果有错误，则重定向到主页并取消设置全局错误变量
2. 否则，它应该呈现一个将使用当前页面的位置重定向到正确位置的

我该怎么做。唯一可行的方法是进行条件渲染并在渲染中设置全局变量。有更好的方法吗？

Answer 1

在本例中，我使用context api在所有可用的routes中共享state。

1. 对于问题否。1-使用protected route。(简单简洁得多(

• 预先声明path&<ProtectedRoute path="/anyPath" component={anyComponent}/>上的component

• 如果您想自己灵活设置path，请转到方法否。低于 2

• 在App.js:-中

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { ErrorState } from "./contexts/ErrorState";
// import ProtectedRoute from "./comps/routes/ProtectedRoute";
import ProtectedRouteCustom from "./comps/routes/ProtectedRouteCustom";
import Home from "./comps/Home";
import Demo from "./comps/Demo";
import Dashboard from "./comps/Dashboard";
import "./style.css";
export default function App() {
return (
<ErrorState>
<Router>
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Demo exact path="/demo" component={Demo} />
{/*} <ProtectedRoute exact path="/demo/dashboard" component={Dashboard} /> */}
<ProtectedRouteCustom path="/demo" />
<Route path="*" component={() => "Not Found"} />
</Switch>
</Router>
</ErrorState>
);
}

• ProtectedRoute.js(更多强调Routerender(：-

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useError } from "../../contexts/ErrorState";
const ProtectedRoute = ({ component: Component, ...rest }) => {
const [errorState, errorDispatch] = useError();
const { error } = errorState;
return (
<Route
{...rest}
render={props => {
// you can use props.location.pathname to redirect user to the route path you have specified in App.js (see in console.log)
console.log(props);
// render Dashboard component if 'error' === false
if (!error) return <Component {...props} />;
// redirect to homepage if error === false
else
return (
<Redirect
to={{
// specify the path to redirect (if condition 'error' === true)
pathname: "/",
state: { from: props.location }
}}
/>
);
}}
/>
);
};
export default ProtectedRoute;

2. 对于问题否。2-您可以构建自己的自定义protected route

• path可以在ProtectedRouteCustom中指定或自己设置
• App.js：-

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { ErrorState } from "./contexts/ErrorState";
// import ProtectedRoute from "./comps/routes/ProtectedRoute";
import ProtectedRouteCustom from "./comps/routes/ProtectedRouteCustom";
import Home from "./comps/Home";
import Demo from "./comps/Demo";
import Dashboard from "./comps/Dashboard";
import "./style.css";
export default function App() {
return (
<ErrorState>
<Router>
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Demo exact path="/demo" component={Demo} />
{/*} <ProtectedRoute exact path="/demo/dashboard" component={Dashboard} /> */}
<ProtectedRouteCustom path="/demo" />
<Route path="*" component={() => "Not Found"} />
</Switch>
</Router>
</ErrorState>
);
}

• 自定义protected route:-(更多地强调Redirect而不是Routerender(

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useError } from "../../contexts/ErrorState";
import Dashboard from "../Dashboard";
const ProtectedRouteCustom = ({ path }) => {
const [errorState, errorDispatch] = useError();
const { error } = errorState;
return (
<>
{error ? (
<Redirect to="/" />
) : (
<>
<Redirect from={path} to={path + "/dashboard"} />
<Route to={path + "/dashboard"} component={Dashboard} />
</>
)}
</>
);
};
export default ProtectedRouteCustom;

你可以在这里看到完整的工作代码的沙箱。

关于如何使用沙箱代码的指南

1. 环境为否。1：-

• 取消注释/启用：
  • import ProtectedRoute from "./comps/routes/ProtectedRoute";
  • <ProtectedRoute exact path="/demo/dashboard" component={Dashboard} />
• 注释/禁用：
  • import ProtectedRouteCondition from "./comps/routes/ProtectedRouteCondition";
  • <ProtectedRouteCondition path="/demo" />

2. 否的环境。2：按原样运行

Answer 2

通常所有编码器都使用您的方法。如果你在Facebook群组中查看React。你可以找到正确的答案ı思考。