reactjs - 如果有人在没有登录的情况下通过 url 访问页面，我们如何创建并返回 404 页面

Question

如果有人试图通过 url 访问主页或任何其他页面，例如:http://localhost:3000，我们在哪里添加 404 页面/home 无需登录。主页、个人资料、关于我们页面只有在成功登录后才能访问。

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;

Answer 1

对于 404 页面或错误页面执行此操作:

<Route path="*" component={ErrorPage} />

记得使用exact在您希望 View 可访问的路线上

如果未成功验证，您的 protected 路由应重定向到您的登录页面