You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
Make sure you wrap the main react render code in the Router. For example, with react-dom you need to wrap the app in Browser-Router. If this is a Udacity project, this is typically the index.js file.
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
Well you're using a NavLink outside of the BrowserRouter/HashRouter (whatever you're using)
You said it yourself
You should not use Link outside a Router
Make sure that you have the structure like this
// App render or whatever
render() {
return (
<BrowserRouter>
<NavigationBar />
{`whatever else you doin'`}
</BrowserRouter>
);
}
You must always render them inside a Router
A possible origin is answered in spanish Stackoverflow, its a typescript project.
Original post: https://es.stackoverflow.com/a/372161/24877
According to the React documentation, this usually happens by having the React duplicated (more than one copy of React) https://reactjs.org/warnings/invalid-hook-call-warning.html
Apparently when using the npm link
the application Try to use react from projects "react-app" and "react-app-components" and therefore when publishing it to the npm repository
the error no longer comes out.
To fix it I removed the dependencies react
, react-router-dom
from the package.json and rerun npm install
to remove the folders from node_modules.
package.json
Before:
{
//...
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"babel-loader": "^8.1.0",
"glob": "^7.1.6",
"react": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"source-map-loader": "^1.0.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"peerDependencies": {
"react": "^16.13.1",
"react-router-dom": "^5.2.0"
}
}
After:
{
//...
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"babel-loader": "^8.1.0",
"glob": "^7.1.6",
"source-map-loader": "^1.0.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"peerDependencies": {
"react": "^16.13.1",
"react-router-dom": "^5.2.0"
}
}
I just leave the "@types" to work with typescript