props.history.push () не перенаправляет

Question

props.history.push ("/") не перенаправляет.

Я действительно искал решение этой проблемы и не могу найти, где проблема, и это сводит меня с ума.

index.js

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
//import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);



//Render app on  "root" <div> in index.html 
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
        <App />         
    </ConnectedRouter>
  </Provider>,
    document.getElementById('root'));

//registerServiceWorker();

app.js

import React from 'react';
import { Route, Switch } from 'react-router';
import Home from './components/Home';
import Login from './components/Login/Login';
import Counter from './components/Counter';
import FetchData from './components/FetchData';
import { PrivateRoute } from './components/PrivateRoutes/PrivateRoute';

const App = (props) => {


    return (
        <Switch>
            <Route path="/login" component={Login}/>
            <PrivateRoute path="/" component={Home} />
            <Route path='/counter' component={Counter} />
            <Route path='/fetchdata/:startDateIndex?' component={FetchData} />
        </Switch>
        );
}

export default App;

Login.js

import React, { useState } from 'react';
import { withRouter, Redirect, history } from 'react-router-dom'
import { Form, Label, FormGroup, FormControl, Button } from 'react-bootstrap';
import Home from '../Home';


//Login user
function LoginUser(username, password, callback) {
    console.log("Atemt to login..." + " " + username);

    fetch('api/SampleData/Login', {
        method: "POST",
        body: JSON.stringify({
            email: username,
            password: password,
        })
    }).then(response => response.json())
        .then(json =>callback(json))
}

 function Login(props) {

    var logged = false;

    var data = { username: '', password: '', };


    function getUsername(event) {
        data.username = event.target.value;
        console.log(data);
    }

    function getPassword(event) {
        data.password = event.target.value;
        console.log(data);
    }

    function requestCallback(res) {
        if (res[0] === "connected") {


            props.history.push('/');
            console.log(props.history);
        }
    }

    if (logged === true) {

        return (<Redirect to="/" component={Home} />);
    }
     return (
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
             <Form >
                <FormGroup controlId="formBasicEmail">
                    <Label>Email address</Label>
                    <FormControl type="email" placeholder="Enter email" onChange={getUsername} />
                </FormGroup>
                <FormGroup controlId="formBasicPassword">
                    <Label>Password</Label>
                     <FormControl type="password" placeholder="Password" onChange={getPassword} />
                </FormGroup>

                 <Button variant="primary" onClick={() => LoginUser(data.username, data.password, requestCallback)} style={{ margin: '0 auto', display: 'block', width: '100px' }}>
                    Login
                 </Button>
            </Form>
        </div>

    );
}

export default withRouter(Login);

Как вы можете видеть, компонент Login обернут в withRouter (Логин). console.log (props) в файле Login.js показывает, что история передается в props.

Answer 1

Использовать пакет 'history' npm

1) App.js

import React, { Component } from "react";
import { Route, Router } from "react-router-dom";
import { createBrowserHistory } from "history";

import Dashboard from "./components/dashboard.js ";
import Login from "./components/login.js";
import Profile from "./components/profile.js";
import PrivateRoute from "./privateRoute.js";

export const history = createBrowserHistory(); 
//refer 'history' for wanted component like profile.js

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <PrivateRoute
            path="/"
            component={Dashboard}
            exact
          />
          <Route path="/login" component={Login} exact />
          <PrivateRoute path="/profile" component={Profile} />
        </div>
      </Router>
    );
  }
}
export default App;

a) После входа в систему сохраните некоторые данные в локальном хранилище с ключом «пользователь».

b) На основе этого «пользовательского» объекта в localStorage маршрутизация будет происходить в prBivateRoute.js

c) Если вы хотите выйти из системы, очистите localStorage, он перейдет в loginPage

2) privateRoute.js

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (localStorage.getItem("user")!= "") {      
          return <Component />;   
        }else {
           return <Redirect to={{ pathname: "/login" }} />;     
        }
      }}
    />
  );
};

3) profile.js

import React, { Component } from "react";
import { history } from "./App.js";

class Profile extends Component {
  goBack = () => {
    history.push("/");
  };

  render() {
    <button onClick={() => this.goBack()}> back to dashboard </button>;
  }
}

export default Profile;

Answer 2

Проблема в том, что в вашем PrivateRoute есть постоянная переменная с именем userLogged, которая инициируется значением false.Если переменная true, определенный компонент отображается.Если это false, вы перенаправляете ot /login.

. Значение userLogged всегда false, поэтому вы всегда перенаправляете на /login.Я рекомендую вам обрабатывать ваше состояние входа в систему в родительском компоненте App или через хранилище из redux.