You should not use <Link> outside a <Router> error

Question

I'm learning how to use React and currently trying out React Router and I've tried pretty much everything on stackoverflow and somehow it's not working. I'm not exactly sure what's going on. I'm following https://reacttraining.com/react-router/web/example/custom-link but it's giving me a You should not use Link outside a Router error.

I created a CustomLinkExample.js word for word based on the URL. I'm rending it in my index.js as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, BrowserRouter as Router} from 'react-router-dom';
import './index.css';

import 'bootstrap/dist/css/bootstrap.min.css'
import * as serviceWorker from './serviceWorker';

import CustomLinkExample from './components/CustomLinkExample';


ReactDOM.render(
    <BrowserRouter>
        <CustomLinkExample />
    </BrowserRouter>
  , document.getElementById('root'));


serviceWorker.register();

Any idea what I'm doing wrong?

EDIT: adding some additional details CustomLinkExample.js

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function CustomLinkExample() {
  return (
    <Router>
      <div>
        <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home" />
        <OldSchoolMenuLink to="/about" label="About" />
        <hr />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function OldSchoolMenuLink({ label, to, activeOnlyWhenExact }) {
  return (
    <Route
      path={to}
      exact={activeOnlyWhenExact}
      children={({ match }) => (
        <div className={match ? "active" : ""}>
          {match ? "> " : ""}
          <Link to={to}>{label}</Link>
        </div>
      )}
    />
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

export default CustomLinkExample;

This is the error:

Uncaught Invariant Violation: You should not use <Link> outside a <Router>
    at invariant (http://localhost:3000/static/js/0.chunk.js:4202:15)
    at Link.render (http://localhost:3000/static/js/0.chunk.js:36766:53)
    at finishClassComponent 

(http://localhost:3000/static/js/0.chunk.js:26159:35)
        at updateClassComponent (http://localhost:3000/static/js/0.chunk.js:26114:28)
        at beginWork (http://localhost:3000/static/js/0.chunk.js:27104:20)
        at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:31124:16)
        at workLoop (http://localhost:3000/static/js/0.chunk.js:31165:28)
        at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:11030:18)
        at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:11079:20)
        at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:11133:35)
        at replayUnitOfWork (http://localhost:3000/static/js/0.chunk.js:30348:9)
        at renderRoot (http://localhost:3000/static/js/0.chunk.js:31278:17)
        at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:32202:11)
        at performWork (http://localhost:3000/static/js/0.chunk.js:32112:11)
        at performSyncWork (http://localhost:3000/static/js/0.chunk.js:32086:7)
        at requestWork (http://localhost:3000/static/js/0.chunk.js:31941:9)
        at scheduleWork (http://localhost:3000/static/js/0.chunk.js:31754:9)
        at scheduleRootUpdate (http://localhost:3000/static/js/0.chunk.js:32449:7)
        at updateContainerAtExpirationTime (http://localhost:3000/static/js/0.chunk.js:32475:14)
        at updateContainer (http://localhost:3000/static/js/0.chunk.js:32543:14)
        at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost:3000/static/js/0.chunk.js:32856:7)
        at http://localhost:3000/static/js/0.chunk.js:33008:18
        at unbatchedUpdates (http://localhost:3000/static/js/0.chunk.js:32331:14)
        at legacyRenderSubtreeIntoContainer (http://localhost:3000/static/js/0.chunk.js:33004:9)
        at Object.render (http://localhost:3000/static/js/0.chunk.js:33079:16)
        at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:810:50)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
        at fn (http://localhost:3000/static/js/bundle.js:150:20)
        at Object.0 (http://localhost:3000/static/js/main.chunk.js:946:18)
        at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
        at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
        at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
        at http://localhost:3000/static/js/main.chunk.js:1:57

index.js:1446 The above error occurred in the <Link> component:
    in Link (at CustomLinkExample.js:26)
    in div (at CustomLinkExample.js:24)
    in Route (at CustomLinkExample.js:20)
    in OldSchoolMenuLink (at CustomLinkExample.js:8)
    in div (at CustomLinkExample.js:7)
    in Router (created by BrowserRouter)
    in BrowserRouter (at CustomLinkExample.js:6)
    in CustomLinkExample (at src/index.js:18)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:17)

I'm basically running

npm start

and then localhost:3000. Not sure if this is the issue?

Answer 1

In your main file, you are importing BrowserRouter as Router, so you need to actually call it Router in your render call, not BrowserRouter.

Also, you don’t need another router in your component. The one at top level is fine.