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

Question

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

Я создал слово 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

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

Answer 1

В вашем основном файле вы импортируете BrowserRouter как Router, поэтому вам нужно фактически назвать его Router при вызове рендеринга, а не BrowserRouter.

Кроме того, вам не нужен другой маршрутизатор в вашем компоненте. Тот на верхнем уровне в порядке.