You should not use Route or withRouter () outside the router when using react router 4 and the style component in the reaction

Question

I am trying to build my first portfolio website and get stuck in routing using reactive routers 4.2.2 and styled components 2.2.3.

error message: You should not use Route or withRouter () outside the router

I am also trying to use the link instead of NavLink, but also got an error ( Do not use the link outside the router )

Someone will help me.

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; `; 

Answer 1

Make sure you wrap up the main reaction rendering code in the router. For example, with Reaction-DOM, you need to wrap the application in a Browser-Router. If this is a Udacity project, it is usually an index.js file.

 import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root')); 

Answer 2

It's good that you use NavLink outside of the BrowserRouter / HashRouter (no matter what you use)

You said it yourself

You must not use the link outside the router

Make sure you have a structure like this

 // App render or whatever render() { return ( <BrowserRouter> <NavigationBar /> {`whatever else you doin'`} </BrowserRouter> ); } 

You should always display them inside the router.

Answer 3

It worked for me too! Thanks!