Source:  Twitter logo

When I was using BrowserRouter from react-router-dom, My Routes were working. But to use custom history, I replaced BrowserRouter with Router from react-router. After that my Route components are not loading properly but the url is changing properly. Here is my codes:

AppRouter-JS:----

import React from 'react';
import { Router, Route, Switch} from 'react-router';
// import { BrowserRouter as Router,Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history'

import Header from '../components/Header.js';
import Dashboard from '../components/DashboardPage.js'
import CreateExpense from '../components/CreateExpensePage.js';
import EditExpense from '../components/EditExpensePage.js';
import Help from '../components/HelpPage.js';
import PageNotFound from '../components/PageNotFound.js'
import LoginPage from '../components/LoginPage.js'


export const history = createBrowserHistory();

  const AppRouter = ()=>(
    <Router history={history}>
    <div>
      <Header/>
      <Switch>
        <Route path='/' exact={true} component={LoginPage}/>
        <Route path='/dashboard' component={Dashboard}/>
        <Route path='/create' component={CreateExpense} />
        <Route path="/edit/:id" component={EditExpense}/>
        <Route path='/help' component={Help} />
        <Route component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
  )
  export default AppRouter;

HeaderJS:-- (Here we have the NavLinks)

import React from 'react';
import {NavLink, Link} from 'react-router-dom';
import {connect} from 'react-redux';

import {LogoutAction} from '../Redux/Actions/AuthActions.js'

export const Header = ({logoutAction})=>(
    <header>
      <h1>Expense Tracker</h1>
      <p><NavLink exact activeClassName='active-class' to='/'>Home Page</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/create'>Add Expense</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/help'>Help Page</NavLink></p>
      <button onClick={logoutAction}>Logout</button>
    </header>
);

const mapDispatchToProps = (dispatch)=> {
  return {
    logoutAction: ()=> dispatch(LogoutAction())
  }
}

  export default connect(undefined,mapDispatchToProps) (Header);

After clicking any NavLink or Link it always opens the PageNotFound component.

I actually just found my problem, and it might be yours too.

I was on react-router-dom@5.2.0 and history@5.0.0.

react-router 5x is compatible with history 4x. Once I downgraded to history@4.10.1 everything started working.

60 users liked answer #0dislike answer #060
beefaroni profile pic
beefaroni

Now using useNavigate() hook instead of useHistory() or anything related to history.

You can use like this;

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate('/detail')

Note:Written to update information.

2 users liked answer #1dislike answer #12
brkkali profile pic
brkkali

i used history.goBack("/signup") not history.push("/signup") seems to work for me .

0 users liked answer #2dislike answer #20
Sepiocop profile pic
Sepiocop

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).