不重定向到所需的页面

Question

如何在导航中获取loginState，因此成功登录后系统应重定向到Profile屏幕。现在成功登录后，它不会重定向到个人资料屏幕。 我读过一些教程，但都有复杂的细节，我想有一些简单的方法来实现这一点，因为我只有 4 个屏幕。

我在下面添加了一个演示：

https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Home.js

Answer 1

要在组件中使用props.history，您应该用withRouter包装组件

---

import { withRouter } from 'react-router-dom'
....rest code...
export default withRouter(Login)

---

实现所需行为的另一种方法是在路由声明本身执行

---

<Route path="/login" render={()=> loginstate ? < Redirect to= 'profile' /> : <Login/>} />

---

还有什么更适应真实的场景用法，而loginstate不仅仅是一个Login组件，而是在项目的某个根位置

Answer 2

由于它是一个功能组件，因此不会重新渲染，因此不会再次在 return 语句中调用三元。我评论你做的是，在handleSubmit：

const Login = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const userEmail = "[e-mail]";
const userPassword = "1234";
const handleSubmit = e => {
e.preventDefault();
if (email === userEmail && password === userPassword) {
alert("Success");
setLoginState(true);
props.history.replace('/');
} else {
alert("Login details not correct !");
}
};
return (
<div className="login_wrapper">
<div className="login_player_column_layout_one">
<div className="login_player_Twocolumn_layout_two">
<form onSubmit={handleSubmit} className="myForm">
<div className="formInstructionsDiv formElement">
<h2 className="formTitle">Login</h2>
</div>
<div className="loginfillContentDiv formElement">
<label>
<input
className="inputRequest formContentElement"
type="text"
placeholder="Email"
onChange={e => setEmail(e.target.value)}
/>
</label>
<label>
<input
className="inputRequest formContentElement"
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
/>
</label>
<label>
<span className="loginValidationText" />
</label>
</div>
<div className="loginsubmitButtonDiv formElement">
<button type="submit" className="submitButton">
Login
</button>
</div>
</form>
</div>
</div>
</div>
);
};

然后，您可以避免使用<Redirect />组件。 希望这对:)有所帮助

Answer 3

1. 成功登录后，将标志存储在本地存储中

   localStorage.setItem('userLoggedIn'， true(;

2. 应用程序.js：允许用户不受限制地访问登录相关页面

const App = () => {
return (
<div className="App">
<Switch>
<Route exact path="/signIn" component={SignIn} />
<Route exact path="/signUp" component={SignUp} />
<Route exact path="/forgotPassword" component={ForgotPassword} />

<PrivateRoute path="/" component={Dashboard} />
</Switch>
</div>
);
}

3. PrivateRoute.js ： 如果用户未登录，则始终被重定向到登录

const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('userLoggedIn')
? <Component {...props}></Component>
: <Redirect to={{ pathname: '/signIn', state: { from: props.location } }} />
)} />
);

仪表板
5. .js ：登录后用户可以访问仪表板

class Dashboard extends Component {
render() {
return (
<div>
<Header />
<div>
<Switch>
<Route exact path="/" component={MY_PROFILE} />
<Route exact path="/myProfile" component={MyProfile} />
</Switch>
</div>
</div>
);
}
}