Bdtjtk

My React version is '^16.6.1' and Router version is '^4.3.1'.

Before V4 I could route through pages programmatically using browserhistory.

But now I can't do it. I did it using import createHistory from 'history/createBrowserHistory'. It changes the url as I want. But it didn't change the page. It stays in the previous page.

Please give me a solution.

This is my code.

//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>;

Since you're already using BrowserRouter from the react-router-dom module you can simply use this.props.history.push("/yourPath") in children of the BrowserRouter component.