Невозможно правильно настроить маршруты реакции маршрутизатора 4

Question

У меня есть простое приложение с реагированием, редуксом и веб-пакетом

// entry.js
import React from "react";
import {render} from "react-dom";
import { Provider } from "react-redux";
import { Router } from "react-router-dom";
import createHistory from 'history/createBrowserHistory'

import store from './containers/store/index';
import App from './components/App.jsx';

const history = createHistory();

render((
  <Provider store={store}>
    <Router history={history}>
      <App history={history} />
    </Router>
  </Provider>),
  document.getElementById('root')
)

Если пользователь не вошел в систему (userInfo имеет значение NULL), тогда я хочу, чтобы путь был / и отображать компонент Home, когда пользователь вошел в систему, я хочу, чтобы путь был /lobby и компонент Lobby визуализации ,

Но, несмотря на изменение пути в браузере, компонент Home отображается. Только тогда, когда я нажимаю второй раз, он рендерит Lobby. В чем моя ошибка?

// App.js
import React, { Component } from 'react';
import {connect} from "react-redux";
import { Switch, Route } from "react-router-dom";

import Profile from "./Profile";
import Lobby from "./Lobby";
import Home from "./Home";
import Signin from "./Signin";

const mapStateToProps = state => {
  return { userInfo: state.userInfo };
};

class App extends Component {
  constructor(props) {
    super(props);
  }

  updateHistory() {
    if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
      this.props.history.replace("/");
      this.setState(this.state); // to rerender
    }

    if (this.props.userInfo && this.props.history.location.pathname === '/') {
      this.props.history.replace("/lobby");
      this.setState(this.state); // to rerender
    }    
  }

  componentWillMount() {
    this.updateHistory()
  }

  componentDidUpdate(prevProps) {
    this.updateHistory()
  }

  render() {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/lobby' component={Lobby} />
        <Route path='/profile' component={Profile} />
        <Route path='/signin' component={Signin} />
      </Switch>
    )
  }
}

const connectedPage = connect(mapStateToProps, { })(App);

export default connectedPage;

Также у меня есть компонент Link on Home, который изменяет путь на панели навигации браузера, но никак не влияет на визуализированный компонент Home.

// Home.js
import React, { Component } from 'react';
import Header from 'semantic-ui-react/dist/es/elements/Header/Header';
import Button from 'semantic-ui-react/dist/es/elements/Button/Button';
import Container from 'semantic-ui-react/dist/es/elements/Container/Container';
import {connect} from "react-redux";
import { Link } from "react-router-dom";

import l10n from '../../l10n/ru';
import { userRegister } from '../../containers/actions';

const mapStateToProps = state => {
  return { isRegistering: state.isRegistering };
};

class Home extends Component {
  render() {
    return (
      <Container className="page-home">
        <Header as="h1" className="page-title">Home</Header>
        <div className="home-text">
          <p>{ l10n.HOME_TEXT }</p>
        </div>
        <div className="link-signin-container">
          <p>{l10n.HOME_SIGIN_TEXT} <Link to="/signin">{l10n.HOME_SIGIN_LINK}</Link></p>
        </div>
        <div className="home-button-container">
          <Button
            size="massive"
            icon="play"
            content={l10n.HOME_PLAY_BUTTON_TEXT}
            labelPosition="right"
            loading={this.props.isRegistering}
            onClick={this.props.userRegister}
          />
        </div>
      </Container>
    )
  }
}

const connectedPage = connect(mapStateToProps, { userRegister })(Home);

export default connectedPage;

У меня такое чувство, будто я упускаю что-то очень основное в маршрутизации с реакции-маршрутизатором.

Answer 1

Наконец выяснил, что вызвало неприятности

Компоненты Home и App подключены к онлайн-магазину. React-router связывается с хранилищем и обрабатывает его с помощью функции withRouter.

Как только я изменился

const connectedPage = connect(mapStateToProps, { userRegister })(Home); до

const connectedPage = withRouter(connect(mapStateToProps, { userRegister })(Home));

и

const connectedPage = connect(mapStateToProps, { })(App); до

const connectedPage = withRouter(connect(mapStateToProps, { })(App));

все заработало отлично

для подробностей проверьте это: https://reacttraining.com/react-router/web/guides/redux-integration

Answer 2

Попробуйте использовать this.props.location вместо this.props.history.location. См. эту часть документов .

Что касается ссылки, в этом разделе

if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
  this.props.history.replace("/");
  this.setState(this.state); // to rerender
}

Вы говорите компоненту перенаправить на «/» в любое время, когда нет пользователя и маршрут не соответствует «/». Таким образом, ссылка меняет маршрут на «/ signin», но затем немедленно возвращается обратно на «/» .