ImportError: 'useNavigate' is not exported from 'react-router-dom' - javascript

When trying to import useNavigate from react-router-dom, I get the following error:
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
My Import statement:
import { useNavigate } from 'react-router-dom';

You are trying to use the latest features of react-router.
Please make sure that you installed the react-router-dom#6.0.0-alpha.2 .
It is React Router v6 which gives you a useNavigate hook
Please refer here for further reading from the React Router team
Two quick ways to check the version:
Verify from the package.json file
Run npm list --depth=0 to view the various packages in your project

If you're using react router v5 you can use useHistory.
import { useHistory } from "react-router-dom";
use:
history.push('/your-component')

I faced issue as like this: "useNavigate is not exported from 'react-router-dom"
My solution - I uninstalled the react-router-dom and I have reinstalled it... now this issue is resolved for me..

Related

Attempted import error: 'CardAction' is not exported from '#material-ui/core'

I'm working on a react app and I'm trying to import CardAction from #material-ui but then:
Attempted import error: 'CardAction' is not exported from '#material-ui/core'.
So obviously I went to Stackoverflow and I have a question:
Is CardAction only available in material-ui v5 and if so how do I install it?
Thank you!

'react-router-dom' does not contain an export named 'useHistory'

Im trying to import useHistory from react-router-dom but it keeps giving me the error 'react-router-dom' does not contain an export named 'useHistory'.
React-router-dom's version is 4.3.1 and i've tried updating (in case there was an updated version) but every time i do npm install react-router-dom it always just installs 4.3.1 It updated react-router from 4.3.1 to 5.2.0 just fine so i don't know why react-router-dom doesn't update (if there is an updated version).
If anyone knows another way to import useHistory or make a back button that goes to the previous URL from anywhere I'd love to know.
"useHistory" is replaced by "useNavigate", in "react-router-dom" v.6
import { useNavigate } from 'react-router-dom';
const navigateTo = useNavigate();
navigateTo('/your-page')
You can update react-router-dom package by manually changing the version in package.json to 5.2.0
or
install the specific version by using the below command
npm i react-router-dom#5.2.0
or the latest version like
npm i react-router-dom#latest

issue with react-router BrowserRouter in react with typescript?

I have gone through several similar questions but could not find something that worked. I am trying to bring in BrowserRouter from react-router but it says:
Module '"../node_modules/#types/react-router"' has no exported member 'BrowserRouter'
as per another similar question on here, I did an npm install of #types/react and #types/react-router but saved as dev dependencies. they were already in my package.json but as regular dependencies. before this, they were giving a similar issue when doing import React from 'react'. It would say that those modules could not be found, same for router. then when i did the install, those errors went away but the BrowserRouter started showing this error. I did also try 'react-router-dom'.
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import './App.css';
import Recipes from './components/Recipes';
const App: React.SFC = () => {
return (
<BrowserRouter>
<main>
<Switch>
<Route exact path='/' component={Recipes} />
</Switch>
</main>
</BrowserRouter>
);
}
export default App;
Just expecting for the error to not be present and to be able to regularly navigate. This is my first time really using typescript.
According to the documentation of React Router, BrowserRouter gets imported from 'react-router-dom', not 'react-router'.
Here is the example code given in the link above.
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>
Here is a SO question about the difference between react-router and react-router-dom and the accepted answer contains the following.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router.
I did also try 'react-router-dom'.
It should work, e.g. this code
import { BrowserRouter, Route, Switch } from "react-router-dom";
works.
Both react-dom and react-router-dom packages should be installed. That means both can be found in the dependencies section of package.json file. Working sample project using Typescript can be found here.

'react-router' does not contain an export named 'browserHistory'

So I'm trying to use history in React, but it seems to be moved around a lot. I found this:
https://github.com/ReactTraining/react-router/blob/ab4552d2ea0ec5c0cf3c534bca654a1af3ea0dec/docs/guides/NavigatingOutsideOfComponents.md
but it just says that 'react-router' does not contain an export named 'browserHistory'. How can I solve it? Where can I find history? All answers I found were around 1.5 years old.
You're looking for the BrowserRouter.
import { BrowserRouter } from 'react-router';
browserHistory is something that existed in v2/v3 but was rewritten into BrowserRouter in v4.
There is a migration guide here that should help you.
history Api has been moved to a separate history package
In order to create browserHistory, you install history like
npm install -S history
and write
import createHistory from "history/createBrowserHistory"
const browserHistory = createHistory()
export { browserHistory };
However in react-router-v4 an equivalent of Router with browserHistory is BrowserRouter
You no longer have browserHistory apparently. So you can do this instead,
<Route>
<Header />
</Route>
and you can do
function Header(props) {
// props.history and props.location are available now inside this component
}
and then you can do props.history.push or whatever if that is what you want to do.
The link you have is for the older version of react-router so check out react-router 4

React Router v4.1.1

I am trying to convert this simple application to support react router https://github.com/jackfranklin/universal-react-example to v4.1.1.
In the package.json all I changed is the following:
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1"
Everything stopped working. Could you please help me build this app working in React Router v4.1.1? There is no proper documentation for react routerv4.1.1 server side rendering. So struck with this new version.
Since React Router v4.1.1 is a major change, answering this question will help a lot of us, in the form of first proper tutorial for
React Router v4.1.1.
React Router v4 is very different from the previous versions, you can't just change the version number and expect everything to work smoothly. Go through the docs and the examples. Change the app step by step.
Useful links:
https://reacttraining.com/react-router/web/guides/server-rendering
http://rants.broonix.ca/upgrading-to-react-router-v4/
Moving from react router 3.x to 4.x
A few things changed when React Router 4!
First, the names of the packages changed. So you have to update your imports from 'react-dom' to 'react-router-dom'. You still need to include 'react' and 'react-router' as well.
Second, there are multiple Browsers now. So you have to import BrowserRouter instead of just Router. (You can also use HashRouter, but I'd say start with BrowserRouter.)
See:
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
Start there and keep going. Good luck!

Categories