反应组件不使用链接渲染

Question

我在使用react，redux和react路由器时遇到问题。

当我使用<链接>浏览页面时，组件不会完全重新渲染。

例如：如果我在登录页面上，然后转到注册页面（使用链接），则在后者中，某些css / js元素将无法正确显示。

这是我的代码：（没有导入信息和无关的详细信息）

主要组件

class App extends Component {

  render() {
    return (
      <div className="container-scroller">
        <LoadingBar showFastActions style={{ backgroundColor: 'orange', height: '4px' }}  />
        <BrowserRouter>
          <Router history={History}>
            <Switch>
              <PrivateRoute exact path="/" component={DashboardPage} />
              <PrivateRoute exact path="/facility" component={FacilityPage} />
              <Route exact path="/register" component={RegisterPage} />
              <Route exact path="/signin" component={SignInPage} />
              <Route exact path="/signout" component={Signout} />
              <Route component={NotFoundPage} />
            </Switch>
          </Router>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

登录页面：

class SignInPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.signIn(this.state.inputEmail, this.state.inputPassword);
  }

  render() {

    {/* redirect user if already logged in */}
    let token = localStorage.getItem('token');
    if (token) {
      return <Redirect to='/' />
    }

    return (
      // sign in form
      <div className="mt-3 text-center">
        <Link to="/register" className="auth-link text-white">
          Don't have an account ?
          <span class="font-weight-medium"> Sign in</span>
        </Link>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    errors: state.auth.errors,
  };
}

const mapDispatchToProps = dispatch => {
  return {
    signIn: (email, password) => {
      return dispatch(userActions.signIn(email, password));
    }
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignInPage));

注册页面：

import '../../node_modules/jquery-validation/dist/jquery.validate.min.js';
import '../assets/js/form-validation.js';

class RegisterPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
      password_confirmation: '',
      first_name: '',
      last_name: '',
    };
  }

  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  handleSubmit = e => {
    e.preventDefault();
  }

  render() {

    {/* redirect user if already logged in */}
    let token = localStorage.getItem('token');
    if (token) {
      return <Redirect to='/' />
    }

    return (
      // register form
    )
  }
}

const mapStateToProps = state => {
  return {
    errors: state.users.errors,
  };
}

const mapDispatchToProps = dispatch => {
  return {
    signIn: (email, password, firstName, lastName) => {
      return dispatch(userActions.register(email, password, firstName, lastName));
    }
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RegisterPage));

似乎我不是唯一一个遇到此问题的人。我已经尝试过withRouter解决方案，但是它不起作用。

有人可以帮助我吗？

谢谢！