Вы не должны использовать <Link>вне ошибки <Router>при создании учебного приложения сact-admin

Question

Я использую этот учебник для создания панели администратора с библиотекой реагировать-администратор. В соответствии с этим, я поставил этот код

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

Файл index.js, созданный с помощью create-реагировать-приложение:

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

Попробуйте:

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

У меня была похожая проблема, как выяснилось, потому что были установлены разные версии реакции-маршрутизатора и реактив-маршрутизатора-dom.Попробуйте удалить с помощью пряжи, затем, если они остались, удалите их из папки node_modules.А затем установите реакцию-роутер-дом, используя пряжу

Answer 2

Можете ли вы предоставить файл index.js? кажется, что в имени приложения для файла App.js существует конфликт, иначе вы где-то использовали реакционный маршрутизатор и забыли включить его вокруг приложения.

Answer 3

Маршрутизация в реакции: 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>
    );
  }
}