React Router Switch无法正常工作

Question

我是新来的反应者，尝试创建具有两个菜单项（仪表板和用户）的简单导航。但是，当我单击“用户”链接时，它没有呈现该页面内容，但仪表板内容却隐藏了。有人请帮助我解决问题。

App.js

import React, { Component } from 'react';
import Login from './pages/Login';
import { BrowserRouter as Router, Switch, Route, Link, Redirect, withRouter } from 'react-router-dom';

import { history } from './_helpers/history';
import { authenticationService } from './_services/authentication.service';
import Users from './pages/users/Users';
import Dashboard from './pages/Dashboard';


class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
        currentUser: null
    };
  }


  componentDidMount() {
      authenticationService.currentUser.subscribe(x => this.setState({ currentUser: x }));
  }

  logout() {
      authenticationService.logout();
      history.push('/login');
  }



  render () { 
    const { currentUser } = this.state;
    return (
      currentUser ? (

        <Router>
        <div id="wrapper">  
           <ul>
        <li><Link to={'/'} className="nav-link" > <i className="fas fa-fw  fa-tachometer-alt"></i> <span>Dashboard</span> </Link></li>
          <li><Link to={'/users'} className="nav-link" > <i className="fas fa-fw fa-users"></i> <span>Users</span> </Link></li>
        </ul>

          <Switch>
              <Route path='/' component={Dashboard} />
              <Route path='/users' component={Users} />
          </Switch>

          </div>



      </Router>
      ) : <Login />
  );
 }
}

export default App;

Dashboard.js

import React, { Component } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { authenticationService } from '../_services/authentication.service';
import { history } from '../_helpers/history';


class Dashboard extends Component {

  constructor (props){
    super(props);

    if (authenticationService.currentUserValue) { 
      history.push('/');
    }

    this.state = {
        isPage: '/'
    }    

  }

    render (){
        if(this.state.isPage == window.location.pathname){
            return (    
                <div className="container">
                    dashboard
                </div>
            )
        }else{
            return '';
        }
    }

  }


export default Dashboard;

Users.js

import React, { Component } from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { authenticationService } from '../../_services/authentication.service';
import { history } from '../../_helpers/history';


class Users extends Component {

  constructor (props){
    super(props);

    if (authenticationService.currentUserValue) { 
      history.push('/');
    }

    this.state = {
        isPage: '/users'
    }

  }

    render (){
        if(this.state.isPage == window.location.pathname){
            return (    
                <div className="container">
                    users
                </div>
            )
        }else{
            return '';
        }

    }

  }


export default Users;

Answer 1

但仪表板内容被隐藏。

你能详细说明一下吗？我不太明白你的意思。

问题可能在于您对反应生命周期的使用。 authenticationService.currentUser.subscribe() 是在 componentDidMount() 上设置的，因此仅在 JSX 挂载到 DOM 后才设置。您的用户组件正在检查authenticationService.currentUserValue在安装之前首先运行的构造函数。authenticationService.currentUserValue也许给你一个错误，这会把你踢出去/。控制台记录该值或将其放置在 componentDidMount 内，以便它仅在安装后进行检查。

constructor (props){
    super(props);

    this.state = {
        isPage: '/users'
    }
  }

  componentDidMount() {
     if (authenticationService.currentUserValue) { 
      history.push('/');
    }
  }