如果有人尝试通过url访问主页或任何其他页面，例如：无需登录即可http://localhost:3000/home，我们在哪里添加404页面。主页、个人资料、关于我们页面只有在成功登录后才能访问。
App.js
const App = () => {
return (
<UserProfileContext.Provider value={{ data, setData }}>
<BrowserRouter>
<>
<Navigation />
<Switch>
<ProtectedRoute exact path="/" component={Home} />
<ProtectedRoute path="/profile" component={Profile} />
<ProtectedRoute path="/aboutus" component={Aboutus} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
</Switch>
</>
</BrowserRouter>
</UserProfileContext.Provider>
);
};
ReactDOM.render(
React.createElement(App, null),
document.getElementById("root")
);
export default App;
Navigation.js
const Navigation = () => {
const history = useHistory();
const { data } = useContext(UserProfileContext); // added 16 jun based on stack
const divStyle = {
float:'left',
color: '#64cad8',
padding: '0px 0px 0px 10px',
font:'Lucida, sans-serif'
};
function logout() {
localStorage.removeItem('loginEmail')
localStorage.removeItem('Privilege')
history.push('/login')
window.location.reload(true);
}
return localStorage.getItem('loginEmail') &&
<div className="App">
<div className="wrapper">
<nav className="siteNavigation_nav_links">
<div className="clubLogo landing"style={divStyle}><b>Southside Soccer</b></div>
<NavLink className="mobile_register_link" to="/">Home</NavLink>
<NavLink className="mobile_register_link" to="/profile">Profile</NavLink>
<NavLink className="mobile_login_link" to="/login" onClick={logout}>Logout</NavLink>
<NavLink className="mobile_login_link" to='/aboutus'>About us</NavLink>
<div className="profileImage nav menu">
<span>{data.name}</span>|<img src={data.photo}></img>
</div>
</nav>
</div>
</div>
}
export default Navigation;
对于 404 页面或错误页面，请执行以下操作：
<Route path="*" component={ErrorPage} />
请记住在您希望访问视图的路线上使用exact
如果未成功进行身份验证，则受保护的路由应重定向到登录页面
> 404 错误是指找不到页面 - 我认为您要查找的是 401 错误(这是未经授权的访问错误(。首先，我会回答你的问题;要处理 React-router 中的 401 错误，您通常使用默认路由：
在较早的反应路由器中：
<Route path='*' component={NotFoundComponent} />
在较新的反应路由器(版本 4 和 5(中，只需将路由放在最后：
<Route path="/404" component={GenericNotFound} />
<Redirect to="/404" />
但是，这不会解决您的问题。您要做的是在用户未登录时显示错误页面。不是每当用户访问不存在的 URL 时。
所以有两种方法可以做你想做的事。第一种方法是使用服务器(这是行业中通常的做法(。您有三个页面(登录页面.js，401错误.js，主应用程序.js(。首先，服务器发送登录页面.js。然后，当用户登录时，您发送主应用程序.js页面。如果用户未登录，但尝试访问主应用程序上的 url.js则发送 401-error.js 页面。
我知道这会带来很多开销，所以你可以通过单页应用程序以一种稍微容易但不太安全的方式做到这一点 - 这可能是你打算做的。
首先，您需要维护有关用户是否在整个应用中全局登录(可能使用 redux(的一些状态。然后在每个组件(主页，配置文件等(中，您必须检查用户是否已登录，如果没有，则重定向到404页面。
您可以使用history以编程方式重定向到页面：使用 react 路由器以编程方式导航
class Foo extends Component {
componentDidMount() {
if (reduxStore.userIsLoggedIn === false) {
this.props.history.push('/401')
}
}
/** -- snip -- **/
}
/** -- snip -- **/
<Route render={({ history }) =>
<Foo history={history}/>
}/>在每个页面的开头，您都可以检查每个用户的登录(变量(状态！如果他/她尚未登录，请将他/她重定向到相应的页面！例如，显示"您需要先登录"消息的页面。