React router dom changes url, does not render component-CodePudding

I am using "react-router": "^5.2.1" and "react-router-dom": "^5.3.0", When I use history.push(), I can see that the browser changes URL, but it does not render my component listening on the path. It only renders if I refresh a page. This also happens in individual pages when i user history.push to attempt to redirect a user when they click a button. Any advise/ recommendations on what I'm doing wring will be appreciated.

I already tried already Wrapping my App export with withRouter() but there is no change. I have also wrapped my routes in <Switch>

I am also using hooks in my child pages.

This is how my App.js looks like :

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  const hist = createBrowserHistory();

  return (
    <Router history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </Router>
  );
};

export default App;

My index.js :

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import { Provider } from "react-redux";
import { createBrowserHistory } from "history";
import * as serviceWorker from './serviceWorker';
import { store, persistor } from "./store";
import { PersistGate } from "redux-persist/integration/react";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

CodePudding user response：

React router DOM exports BrowserRouter not Router. You have used Router instead of BrowserRouter.

Change your App.js

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter, Route, Switch, withRouter, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  const hist = createBrowserHistory();

  return (
    <BrowserRouter history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </BrowserRouter>
  );
};

export default App;

CodePudding user response：

You need to import BrowserRouter from react-router-dom, then use it as:

import { BrowserRouter as Router } from "react-router-dom";

You need to change your import statement in App.js as shown in the below code:

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter as Router, Route, Switch, withRouter, Redirect } from "react-router-dom"; // <-- change import statement
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  const hist = createBrowserHistory();

  return (
    <Router history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </Router>
  );
};

export default App;