Question

我正在学习如何使用React，目前正在试用React Router，我已经尝试了stackoverflow上的几乎所有内容，但某种程度上它不起作用。我不确定到底发生了什么。我正在关注https://reacttraining.com/react-router/web/example/custom-link，但是却给了我一个警告。您不应该在路由器错误之外使用链接。

我根据URL创建了一个CustomLinkExample.js单词。我将其放入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开始

，然后是localhost：3000。不知道这是问题吗？

Answer 1

在主文件中，您正在将BrowserRouter导入为Router，因此您需要在渲染调用中实际将其命名为Router，而不是BrowserRouter。

此外，您无需在组件中使用其他路由器。顶层的一个很好。

您不应在<router>错误之外使用<link />

1 个答案: