React-router: Route is not exported in react-router-dom

[hasankhalid]

I am running a standard code via create-react-app and react-router-dom 4.4 and when i import Route and Switch from 'react-router-dom', the program fails to compile and i get an error that says "Attempted import error: 'Route' is not exported from 'react-router-dom'.

My code right now is

I am not sure what's happening but if anyone can help me figure out what i am doing wrong, that would be great.

[MeiKatz]

Importing <Route /> and <Switch /> from react-router-dom is deprecated. Try to import it from react-router instead.

[StringEpsilon]

@MeiKatz You sure that's not a bug? The changelog doesn't mention this and the react-router-dom index.js has this line right on top:

export * from "react-router";

That seems to me like it's intended to re-export _all_ modules from react-router.

[MeiKatz]

@StringEpsilon No, it's definitely the intended way to use it. Just take a look at the source of react-router-dom/Route: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/Route.js#L2. Support for this way will be remove with v5.0 of React Router.

But I think it's a bug nevertheless because it should work, but with a deprecation warning.

[hasankhalid]

That is what i was confused about. The changelog does not mention the deprecation and the documentation for react router still shows this code. It should at least show a deprecation warning if it does not work.

[MeiKatz]

@hasankhalid You're right and I am also not sure about the code policy here at React Router. When you look at the code here in the repository, then there is a deprecation warning defined. When I look at the compiled code in my node_modules folder, then there is not deprecation warning, what's weird.

Also I cannot reproduce your error. When I try to import <Route /> from react-router-dom everything is fine (version is 4.4.0).

EDIT: My bad: what is deprecated is to use import Route from "react-router-dom/Route", but not import { Route } from "react-router-dom".

[StringEpsilon]

@MeiKatz I thought that warning was just to avoid mixing CJS with ESM imports, as the changelog of 4.4.beta.1 says. I could not find any other evidence that importing react-router modules through react-router-dom is supposed to go away or already deprecated. (Edit: Obsolete per your edit)

Back to topic: @hasankhalid Can you try to reproduce this issue in a separate repository? It seems like react-router 4.4 is quite sensible to different build environments, judging from other issues.

[hasankhalid]

It was some weird behaviour that i did not not understand. I imported them via react-router and it was worked. I tried react-router-dom and the error showed again. I terminated the process and started it again and now it is working. I am not sure what was happening there but the issue is solved.

[Xazzzi]

Seems like Route.propTypes are missing.

[Ankit895]

link tag stopped working after new changes

[timdorr]

@Ankit895 See #6630. That doesn't sound like it relates to this issue.

[timdorr]

This is a dupe of #6630. You have mixed versions of react-router and react-router-dom installed.

[SistemasSouza]

I have the same problem, in import Route of the react-router-dom

my import

error message

the project was created with create-react-app

package.json have version 5.0.0 of the react-router-dom

[hasankhalid]

@timdorr is correct. The error occurs when you have mixed versions of react-router and react-router-dom installed.

[webwizart]

Same issue here, generated with react-create-app

Which version should I use then?

[robbertolierook]

Same here, also with create-react-app

  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },

import { BrowserRouter, Route, Switch } from 'react-router-dom';



md5-eee98acd099cfdd77db5cd0ac564eeff



./src/components/Router.js
Attempted import error: 'Route' is not exported from 'react-router-dom'.

[robbertolierook]

Nvm fixed it, initially I only downloaded react-router-dom. When you do that it will crash because you obviously need react-router as well, so @webwizart and @SistemasSouza, install that too. After that it still won't work because you need to restart your development server. That should do it

[tusharmutreja]

Close the server and restart it. It Works Fine
yarn start

[wlopez-enkoding]

Close the server and restart it. It Works Fine
yarn start

This is the kind of person who would save the world if everything started to fail.