如何使用react

一个简单的解决方案是制作一个

HOC

根据您的应用程序的嵌套方式，您可能需要利用本地

redux

工作示例：https :
//presandbox.io/s/5m2690nn6n（使用本地状态）

路线/index.js

    import React from "react";    import { BrowserRouter, Switch, Route } from "react-router-dom";    import Home from "../components/Home";    import Players from "../components/Players";    import Schedule from "../components/Schedule";    import RequireAuth from "../components/RequireAuth";    export default () => (      <BrowserRouter>        <RequireAuth>          <Switch> <Route exact path="/" component={Home} /> <Route exact path="/players" component={Players} /> <Route path="/schedule" component={Schedule} />          </Switch>        </RequireAuth>      </BrowserRouter>    );

组件/RequireAuth.js

    import React, { Component, Fragment } from "react";    import { withRouter } from "react-router-dom";    import Login from "./Login";    import Header from "./Header";    class RequireAuth extends Component {      state = { isAuthenticated: false };      componentDidMount = () => {        if (!this.state.isAuthenticated) {          this.props.history.push("/");        }      };      componentDidUpdate = (prevProps, prevState) => {        if (          this.props.location.pathname !== prevProps.location.pathname &&          !this.state.isAuthenticated        ) {          this.props.history.push("/");        }      };      isAuthed = () => this.setState({ isAuthenticated: true });      unAuth = () => this.setState({ isAuthenticated: false });      render = () =>        !this.state.isAuthenticated ? (          <Login isAuthed={this.isAuthed} />        ) : (          <Fragment> <Header unAuth={this.unAuth} /> {this.props.children}          </Fragment>        );    }    export default withRouter(RequireAuth);

或者，您可以创建一个包含受保护路由的受保护组件，而不是包装路由。

工作示例：https :
//presandbox.io/s/yqo75n896x（使用

redux

路线/index.js

    import React from "react";    import { BrowserRouter, Route, Switch } from "react-router-dom";    import { createStore } from "redux";    import { Provider } from "react-redux";    import Home from "../components/Home";    import Header from "../containers/Header";    import Info from "../components/Info";    import Sponsors from "../components/Sponsors";    import Signin from "../containers/Signin";    import RequireAuth from "../containers/RequireAuth";    import rootReducer from "../reducers";    const store = createStore(rootReducer);    export default () => (      <Provider store={store}>        <BrowserRouter>          <div> <Header /> <Switch>   <Route exact path="/" component={Home} />   <Route path="/info" component={Info} />   <Route path="/sponsors" component={Sponsors} />   <Route path="/protected" component={RequireAuth} />   <Route path="/signin" component={Signin} /> </Switch>          </div>        </BrowserRouter>      </Provider>    );

容器/RequireAuth.js

    import React from "react";    import { Route, Redirect } from "react-router-dom";    import { connect } from "react-redux";    import ShowPlayerRoster from "../components/ShowPlayerRoster";    import ShowPlayerStats from "../components/ShowPlayerStats";    import Schedule from "../components/Schedule";    const RequireAuth = ({ match: { path }, isAuthenticated }) =>      !isAuthenticated ? (        <Redirect to="/signin" />      ) : (        <div>          <Route exact path={`${path}/roster`} component={ShowPlayerRoster} />          <Route path={`${path}/roster/:id`} component={ShowPlayerStats} />          <Route path={`${path}/schedule`} component={Schedule} />        </div>      );    export default connect(state => ({      isAuthenticated: state.auth.isAuthenticated    }))(RequireAuth);

您甚至可以通过创建包装函数来获得更多的模块化。您只需包装组件即可选择任何路线。

例如：

<Route path="/blog" component={RequireAuth(Blog)} />