Question

我有一个用于身份验证的组件，如果用户未通过身份验证，我想将其推送到登录页面。

设置的基本示例是...

身份验证组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { auth } from '../../firebase';
import { replace } from 'react-router-redux';

export default (WrappedComponent, {}) => {
  class Authentication extends Component {
    componentWillMount() {
      auth.onAuthStateChanged(user => {
        if (user) {
          // User is signed in.
          console.log('USER IS SIGNED IN');
        } else {
          // No user is signed in.
          console.log('USER IS NOT SIGNED IN');
          this.props.dispatch(replace('login'));
        }
      });
    }

    render() {
      return <WrappedComponent>{this.props.children}</WrappedComponent>;
    }
  }

  return connect(
    null,
    null
  )(Authentication);
};

路线

import React from 'react';
import Loadable from 'react-loadable';
import { Router, Route, IndexRoute } from 'react-router';
import AuthenticationComponent from './containers/Authentication';
import App from './components/App';

const AsyncRoute = loader =>
  Loadable({
    loader,
    loading: () => <h3>Loading...</h3>,
    delay: 300,
  });

const LandingPage = AsyncRoute(() =>
  import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage')
);

const Login = AsyncRoute(() =>
  import(/* webpackPrefetch: true, webpackChunkName: "login" */ './containers/Login')
);

const NotYetImplemented = () => <h6>Not Yet Implemented...</h6>;

export default ({ history }) => (
  <Router history={history}>
    <Route path="/" component={AuthenticationComponent(App, {})}>
      <IndexRoute component={LandingPage} />
    </Route>
    <Route path="/login" component={Login} />
  </Router>
);

当前，当Firebase报告用户未通过身份验证时，路由会更新并显示为http://localhost:3001/login，但是会呈现LandingPage组件。

如果刷新/login上的页面，则可以获取正确的组件。

我已将replace换成push，但结果相同。

Answer 1

就像@Boo一样，您必须使用完全相同，也可以像这样使用switch和Route

import { Switch, Route} from 'react-router-dom'
<Switch>
  <Route path='/'      component={ HomePage } exact />
  <Route path='/login' component={ LogIn }    exact />
</Switch>

并使用

重定向

您可以执行以下操作（如下代码），而不是在redux中分派操作，这肯定会起作用

    import { Redirect } from 'react-router'
    export default (WrappedComponent, {}) => {
      class Authentication extends Component {
        state = { redirect : false }
        componentWillMount() {
          auth.onAuthStateChanged(user => {
            if (user) {
              // User is signed in.
              console.log('USER IS SIGNED IN');
            } else {
              // No user is signed in.
              console.log('USER IS NOT SIGNED IN');
              //this.props.dispatch(replace('login'));
              this.setState({redirect : true})
            }
          });
        }

        render() {
          const {redirect } = this.state
          if(!redirect){
          return <WrappedComponent>{this.props.children}</WrappedComponent>;
          } else {
          return <Redirect to='where ever you want' />
        }
      }

React Router 3无法呈现正确的组件

1 个答案: