Вы не должны использовать <Link> вне ошибки <Router>

Я изучаю, как использовать React, и в настоящее время пробую React Router, и я пробовал почти все в stackoverflow, и почему-то это не работает. Я не совсем уверен, что происходит. Я слежу за https://reacttraining.com/react-router/web/example/пользовательская ссылка, но это выдает ошибку «Не следует использовать ссылку за пределами маршрутизатора».

Я создал CustomLinkExample.js дословно на основе URL-адреса. Я разбираю его в своем index.js следующим образом:

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();

Любая идея, что я делаю неправильно?

Обновлено: добавление некоторых дополнительных деталей 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;

Это ошибка:

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)

я в основном бегу

npm start

а затем локальный: 3000. Не уверен, что это проблема?