Страница не загружается при переадресации - PullRequest
Новая
       18

Страница не загружается при переадресации

0 голосов
/ 13 марта 2019

Я пытаюсь перенаправить пользователя после входа на домашнюю страницу, происходит перенаправление (это я знаю, потому что 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;

Может кто-нибудь, пожалуйста, дайте мне знать, если они видят какие-либо причины, почему перенаправление работает, но не загружаетсякомпоненты страницы?Я действительно ценю любые указатели.

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Я переместил это <Route path="/" component={Login} /> в конец моих маршрутов в App.js, и это сработало.

0 голосов
/ 13 марта 2019

попробуйте обернуть весь компонент приложения в BrowserRouter

...