Question

我有一个简单的react项目，共有5页（主页，登录，创建，更新，删除）。

当我的项目自动加载时，我的项目应保留在主页组件（'/'）上。用户应该只看到这样的菜单：Home | Create | Update | Delete。

注意，如果用户尝试访问诸如Create | Update | Delete ...之类的页面，则应该提示他或她先登录，并且成功登录后，他或她应能够导航到每个菜单项。

我不想使用伪造的身份验证，但是我应该有一个默认用户登录。由于我是新来的，请提供帮助。

import React, { Component } from "react";
import Burner from "./components/Burner"; 
import Header from "./components/Header"; 
import Footer from "./components/Footer"; 

class App extends Component {
 render() {
   return (
     <div className="container"> <Burner /> <Header /> <Footer /> </div> );
   }
 }
 export default App;

Answer 1

您应该为此使用react-router。

该模块将允许您根据需要将用户重定向并路由到特定页面。

万一您需要重定向用户进行登录，可以使用以下命令：

const PrivateRoute = ({ component, exact, path, authenticated }) => (
    <Route
        exact={exact}
        path={path}
        render={props =>
            authenticated ? (
                React.createElement(component, props)
            ) : (
                <Redirect
                    to={{
                        pathname: "/login",
                        state: { from: props.location }
                    }}
                />
            )
        }
    />
);

然后，如果用户未登录，则可以使用PrivateRoute重定向用户：

import { Login } from './Login';
import { Create } from './Home';

    // authenticated will be true if the user is authenticated
    const AppComponent = ({ authenticated }) => (
    	<Router>
    		<>
    		<Switch>
    			<Route exact path="/login/" component={Login} />
    			<Redirect exact from="/" to="/home" />
    			<PrivateRoute
    				exact
    				path="/create"
    				component={Create}
    				authenticated={authenticated}
    			/>
    		</Switch>
    		</>
    	</Router>
    );

您可以在这里查看DOC：https://reacttraining.com/react-router/web/guides/quick-start

如何使用专用路由将用户重定向到其他页面

1 个答案: