Как настроить React V4 BrowserHistory для работы?

Question

Моя Реагирует версия - ' ^ 16.6.1 ' и Маршрутизатор версия - ' ^ 4.3.1 '.

До V4 Я мог программно перелистывать страницы, используя browserhistory.

Но теперь я не могу этого сделать. Я сделал это, используя import createHistory from 'history/createBrowserHistory'. Это меняет URL, как я хочу. Но это не изменило страницу. Это остается на предыдущей странице.

Пожалуйста, дайте мне решение.

Это мой код.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById("root")
);
serviceWorker.unregister();

// App.js

import React, { Component } from 'react';
import './App.css';
import createHistory from 'history/createBrowserHistory'
import { Route, Redirect } from 'react-router-dom';
import firebase from './firebase';
import Routes from "./Routes";
import NavigationBar from './components/NavigationBar/NavigationBar';

class App extends Component {

  constructor() {
    super();
    this.state = { isLogged: false };
    let ctx = this;
    const history = createHistory();
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            // User is signed in.
            console.log("logged in");
            history.replace('/home');
            ctx.setState({ isLogged : true});
        } else {
            // No user is signed in.
            console.log("not logged in");
            ctx.setState({ isLogged : false});
        }
    });
  }

  render() {
    return (
      <div className="App">
        <NavigationBar />
        <Routes />
      </div>
    )
  }
}

export default App;

// Routes.js

import React from 'react';
import { Route, Switch } from "react-router-dom";
import Login from './components/Admin/Login';
import Home from './components/Home/Home';
import Orchids from './components/Orchids/Orchids';
import Anthurium from './components/Anthurium/Anthurium';
import ContactUs from './components/ContactUs/ContactUs';
import AddOrchid from './components/Admin/AddOrchid';

export default (props) =>
  <Switch>
    {/* <Route path="/" exact component={LandingPage} /> */}
    <Route path="/" exact component={Home} />
    <Route path="/home" exact component={Home} />
    <Route path="/orchids" component={Orchids} />
    <Route path="/anthurium" component={Anthurium} />
    <Route path="/contact-us" component={ContactUs} />
    <Route path="/login" component={Login} />
    <Route path="/add-orchid" component={AddOrchid} />
  </Switch>;

Answer 1

Поскольку вы уже используете BrowserRouter из модуля react-router-dom, вы можете просто использовать this.props.history.push("/yourPath") в дочерних элементах компонента BrowserRouter.