Question

我正在开发带有路由组件的ReactJS Webapp。该站点具有一个登录页面和一个仪表板。仪表板有一个导航栏和一个主要部分。

App.js

class App extends React.Component {
render() {
    return (
        <div style={{height: "100%"}} className="App">
            <Router>
                <Switch>
                    <Route path="/" exact strict component={Dashboard}/>
                    <Route path="/login" exact strict component={Login}/>
                </Switch>
            </Router>
        </div>
    );
}
}

Dashboard.js

class Dashboard extends Component {
state = {
    sideDrawerOpen: false,
    redirect: false
};
drawerToggleClickHandler = () => {
    this.setState((prevState) => {
        return {sideDrawerOpen: !prevState.sideDrawerOpen};
    });
};

render() {

    return (
        <div style={{height: "100%"}} className="App">
            <Toolbar drawerClickHandler={this.drawerToggleClickHandler}/>                
            <main style={{marginTop: '63px'}}>
                    <div>
                        <Switch>
                            <Route exact path="/" render={
                                () => {
                                    return (<div>
                                        Welcome home about
                                    </div>);
                                }}/>

                            <Route exact path="/about" render={
                                () => {
                                    return (<div>
                                        Welcome About
                                    </div>);
                                }
                            }/>
                        </Switch>
                    </div>
            </main>
        </div>
    );
}
}

Toolbar.js

class Toolbar extends Component {
constructor(props) {
    super(props);
    this.state = {
        loggedIn: false,
        redirect: false
    };
    this.logoutClickHandler = this.logoutClickHandler.bind(this);
}


loginHandle() {
    this.setState(prevState => ({
        loggedIn: !prevState.loggedIn
    }))
}

logoutClickHandler() {
    this.setState(prevState => ({
        loggedIn: !prevState.loggedIn
    }));
    // console.log("Logout clicked");
    sessionStorage.setItem('userData', '');
    sessionStorage.clear();
    this.setState({redirect: true});
}

componentDidMount() {
    if (sessionStorage.getItem('userData')) {
        console.log("User logged");
    } else {
        this.setState({redirect: true});
    }
}

render() {
    if (this.state.redirect) {
        return (<Redirect to={'/login'}/>);
    }
    return (
        <header className="toolbar">
                <nav className="toolbar__navigation">
                    <div className="toolbar__logo">
                        <NavLink to="/" exact strict>The Logo</NavLink>
                    </div>
                    <div className="spacer"/>
                    <div className="toolbar__navigation-items">
                        <ul>
                            <li>
                                <NavLink to="/about" activeStyle={
                                    {color: 'green'}
                                }>About</NavLink>
                            </li>

                            <li>
                                <Link to={'/'} onClick={this.logoutClickHandler}>Salir</Link>
                            </li>
                        </ul>
                    </div>                      
                </nav>
        </header>
    );
}
}

工作流程是：用户登录到登录页面并重定向到仪表板，这可以正常工作，但是我希望当我单击仪表板主要部分中的NavLink“关于”时，呈现关于页面，但是没有发生。

Answer 1

您必须在开始时设置所有路线。为了

 <Router>
        <Switch>
           <Privateroute path="/" exact strict component={Dashboard}/>
           <Privateroute path="/about" exact strict component={ABOUT_PAGE_COMPONENT}/>
           <Route path="/login" exact strict component={Login}/>
        </Switch>`enter code here`
    </Router>

为了保护您的路由，请考虑使用专用组件，在该组件中通过路由的render方法进行身份验证检查。如下所示。

PrivateRoute.js文件

import React from 'react';
import { Route, Redirect } from 'react-router-dom';


const PrivateRoute = (props) => {
  const { auth, component: Component, ...rest } = props;
  const { isAuthenticated } = auth;
  return (
    <Route
      {...rest}
      render={() =>
        isAuthenticated ? (
          <>
            <ToolBar />
              <Component />
            //<FooterComponents />
          </>
        ) : (
            <Redirect
              to="/"
            />
          )
      }
    />
  )
}

export default PrivateRoute;

如何在ReactJs中渲染嵌套路由

1 个答案: