历史问题.push

Question

我正在开发react Disney+克隆等，我试图做一些类似的事情：如果用户未获得授权，则显示登录页面，但如果获得授权，那么显示内容。为此，我使用了useHistory。它工作了一秒钟，它只是开始下载登录页面(背景图像正在加载，但登录页面的文本是可见的(，然后它消失了，显示内容页面。Url也会更改一秒钟。

App.js

function App() {

return (
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/login"> 
<Login/>
</Route>
<Route path="/detail/:id"> 
<Detail/>
</Route>
<Route path="/"> 
<Home/>
</Route>
</Switch>
</Router>    
</div>
);
}

Header.js

import React from 'react'
import {selectUserName, selectUserPhoto, setUserLogin, setUserSignOut} from '../../features/user/userSlice' ;
import { useDispatch, useSelector } from "react-redux" ;
import  { auth, provider} from "../../firebase"
import { useHistory} from 'react-router-dom';

const Header = () => {
const dispatch = useDispatch()
const userName = useSelector(selectUserName);
const userPhoto = useSelector(selectUserPhoto);

const history = useHistory();

const signIn = () => {
auth.signInWithPopup(provider)
.then((result) => {
let user = result.user;
dispatch(setUserLogin({
name: user.displayName,
email: user.email,
photo: user.photoURL
}))
history.push('/');
})
}
const signOut = () => {
auth.signOut()
.then(()  => {

dispatch(setUserSignOut());    
history.push('/login');           
})
}
}

Answer 1

根据您的问题，您可以用不同的方式处理Routes。因此，您有一些路线只能在未经授权的情况下显示，而有些路线只能为授权用户显示。为此，您可以进行以下实现。

首先，您可以创建ProtectedRoute函数。

import React from "react";
import { Redirect, Route } from "react-router-dom";
function ProtectedRoute({ component: Component, ...restOfProps }) {
const isAuthenticated = localStorage.getItem("isAuthenticated");
console.log("this", isAuthenticated);
return (
<Route
{...restOfProps}
render={(props) =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
}
export default ProtectedRoute;

然后你可以在你的主应用程序中使用这个功能，在那里你将用组件声明你的路线。

import ProtectedRoute from "./component/ProtectedRoute";
function App() {
return (
<div className="App">
<BrowserRouter>
<Route path="/login" component={Login} />
<ProtectedRoute path="/protected" component={ProtectedComponent} />
</BrowserRouter>
</div>
);
}
export default App;