CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
DarthWader
DarthWader

Reputation: 1036

React router not matching any route, always goes to 404 route

React router can't match any route and always shows last (NotFound) component. Everything works fine if I use BrowserRouter from 'react-router-dom' instead of Router. But I have to use Router because I have to use custom history (for which I am using history library). Heres my code.

import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage';
import AddExpensePage from '../components/AddExpensePage';
import EditExpensePage from '../components/EditExpensePage';
import HelpPage from '../components/HelpPage';
import NotFound from '../components/NotFound';
import Header from '../components/Header';
import LoginPage from '../components/LoginPage';

export let history = createBrowserHistory();

function AppRouter() {
  return (
    <div>
      <Router history={history}>
        <Header />
        <Switch>
          <Route path="/" component={LoginPage} exact={true} />
          <Route path="/dashboard" component={ExpenseDashboardPage} />
          <Route path="/create" component={AddExpensePage} />
          <Route path="/edit/:id" component={EditExpensePage} />
          <Route path="/help" component={HelpPage} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
}

export default AppRouter;

Upvotes: 1

Views: 423

Answers (2)

Eme Hado
Eme Hado

Reputation: 460

I know this doesn't fit the question but in my case, i included a different component in Switch component. Switch component should only have Route components in them.

Upvotes: 0

DarthWader
DarthWader

Reputation: 1036

It looks like react-router-dom version 5.x is not compatible with history version 5.0.0. I switched to history version 4.x and now its working as expected.

Upvotes: 1

Related Questions