I'm trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3.
error message: You should not use Route or withRouter() outside a Router
I also try using Link instead of NavLink but got error too(You should not use Link outside a Router)
Someone help me please.
navigationBar.js
import React, { Component } from 'react';
import { NavigationContainer, NavItem } from './navigationBar.style';
class NavigationBar extends Component {
render() {
return (
<NavigationContainer>
<NavItem to="/">Home</NavItem>
<NavItem to="/projects">Project</NavItem>
</NavigationContainer>
);
}
}
export default NavigationBar;
navigationBar.style.js
import styled from 'styled-components';
import { Flex, Div } from 'theme/grid';
import { NavLink } from 'react-router-dom';
export const NavigationContainer = styled(Flex)`
position: fixed;
right: 20px;
top: 0.5em;
font-size: 1em;
`;
export const NavItem = styled(NavLink)`
position: relative;
padding-left: 10px;
cursor: pointer;
`;
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