你不应该使用 在外面 使用react-admin创建教程应用时出错

Question

我正在使用this教程创建带有react-admin库的管理面板。据我所说，我把这个代码

import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="users" list={ListGuesser} />
    </Admin>
);

export default App;

进入我的App.js文件，但我遇到了这个错误：

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

我试图克隆存储库并运行完成的教程示例，但有相同的错误。我有什么想法我做错了吗？

错误堆栈跟踪：https://pastebin.com/mUu497Ev

使用create-react-app生成的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

你能提供index.js文件吗？似乎App.js文件的应用程序名称中存在冲突，否则您在某处使用了反应路由器而忘记包含在应用程序周围。

Answer 2

试试这个：

$ yarn remove react-router-dom
$ yarn add react-router-dom

事实证明，我遇到了类似的问题，因为安装了不同版本的react-router和react-router-dom。尝试使用yarn删除，然后，如果它们仍然存在，请从node_modules文件夹中删除它们。然后使用yarn安装react-router-dom

Answer 3

在React中路由：https://codesandbox.io/s/q749j486kw

网页

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

class Page1 extends Component {
  render() {
    return (
      <View>
        <Link to="/">HOME</Link>
        <Link to="/Page2">PAGE2</Link>
        <Link to="/Page3">PAGE3</Link>
        <Text>
          <h1>Page1</h1>
        </Text>
      </View>
    );
  }
}

export default Page1;

主页：

import React, { Component } from "react";
import { Text, View } from "react-native";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Page1 from "./Page1.jsx";
import Page2 from "./Page2.jsx";
import Page3 from "./Page3.jsx";
import Home from "./Home.jsx";

export default class Main extends Component {
  render() {
    return (
      <Router>
        <View>
          <Route exact path="/" component={Home} />
          <Route path="/Page1" component={Page1} />
          <Route path="/Page2" component={Page2} />
          <Route path="/Page3" component={Page3} />
        </View>
      </Router>
    );
  }
}