页面不加载重定向reactjs + redux

Question

我试图在登录到主页后重定向用户，重定向发生（我知道这是因为 url 更改并且我转到新页面），但是页面的内容没有加载。我不断收到此错误

Warning: You tried to redirect to the same route you're currently on: "/index"

这是我的 Login.js 代码：

import React, { Component } from 'react';

import '../App.css';
import 'whatwg-fetch';
import { connect } from 'react-redux';
import { loginUser } from './../store/actions/loginActions';
import { Redirect, withRouter } from 'react-router-dom';

class Login extends Component {
 constructor(props) {
 super(props);
 this.state = {
 Email: '', Password: '', isloggedin: false
};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

 handleChange(event) {
 this.setState({ [event.target.name]: event.target.value });
 }

handleSubmit(event) {
 event.preventDefault();
this.props.loginUser(this.state)
}

render() {
  const { authError, token } = this.props;
if(token) return <Redirect to="/index" />  // I'm telling it to redirect if the state has a token
return (
    <div className="Background">
      <Card
        title="Login"
        style={{ width: 400 }}
       >
        <Form onSubmit={this.handleSubmit} className="login-form">
         <Form.Item>
             <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} name="Email" type="text" onChange={this.handleChange} />
         </Form.Item>
         <Form.Item>
             <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" name="Password" onChange={this.handleChange} />
         </Form.Item>
         <Form.Item>
       <Button type="primary" htmlType="submit" disable='notloggedin' className="login-form-button">
         Log in
       </Button>
     </Form.Item>
   </Form>
     <div>
     { authError ? <p> { authError } </p> : null }
   </div>
      </Card>
    </div>
     );
   }
   }

const mapStateToProps = (state) => {
  return {
authError: state.auth.authError,
 token: state.auth.token
  }
 }

const mapDispatchToProps = (dispatch) => {
 return {
loginUser: (data) => dispatch(loginUser(data))
  }
 }

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

我的行动是：

export const loginUser = (data) => {
return (dispatch, getState) => {
 fetch(url, {
    credentials: 'include',
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)})
    .then(res => { if (res.ok) {
       return res.json() }
       else {
         return Promise.reject({
          status: res.status,
          statusText: res.statusText
        })
       }
    })
    .then(function(response) {
       dispatch({type: 'LOGIN_USER', value: response.AccessToken });
     })
    .catch((err) => {
      dispatch({type: 'LOGIN_USER_FAILED', err });
    })
 }
};

我的 App.js 是

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './App.css';
import Login from './components/Login';
import Home from './components/Home';

 class App extends Component {
 render() {
  return (
  <div className="App">
    <header className="App-header">
      <h3 className="App-logo"> App Load </h3>
    </header>
    <BrowserRouter>
   <Switch>
     <Route path="/" component={Login} />
     <Route path="/index" component={Home} />
   </Switch>
 </BrowserRouter>

);}}

export default App;

如果有人看到重定向工作但没有加载页面组件的任何原因，请告诉我？我真的很感激任何指示。

Answer 1

尝试将整个 App 组件包装到 BrowserRouter 中

Answer 2

我将这个 <Route path="/" component={Login} /> 移到 App.js 中路由的底部并且它起作用了。