Home/ Questions/Ways to resolve the error - you should not use or withrouter() outside a
Next
Answered
Gabriel Morand
  • 16
Asked: 2022-05-18T10:24:55+00:00 In:

Ways to resolve the error – you should not use or withrouter() outside a

  • 16

. Advertisement .

..3..

. Advertisement .

..4..

I am working on javascript, but I found the following warning message:

You should not use Route or withRouter() outside a Router

You should not use Link outside a Router

Is there any way to stabilize the issue “you should not use or withrouter() outside a ”?
I read a lot of topics about this, but all of them were trying to install anything. Is this the correct way, or any recommendation for me?
Please find the beginning command below:

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;

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

you should not use route
Share

2 Answers

  1. Best Answer
    Expert

    The cause: This warning is thrown to alert that BrowserRouter has not been specified and you are utilizing Link, NavLink, or Router components.

    The solution: To solve this problem, you define BrowserRouter in the index.js file to navigation to be available across your app.

    Import BrowserRouter from the react-router-dom package and wrap the App component with it in the index.js file.

    import React from 'react';
import ReactDOM from "react-dom";
import App from './App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
    • 22

  2. Wrap the main react render code within the Router. React-dom, for example, requires that you wrap the app using Browser-Router. This is the index.js file if this is a Udacity Project. 

    import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
 <BrowserRouter>
 <App />
 </BrowserRouter>

 , document.getElementById('root'));
    • 10

Leave an answer

You must login to add an answer.

Need An Account,