«Вы не должны использовать <Route>или withRouter () вне <Router>» - но я в маршрутизаторе

Question

Моя песочница с кодом здесь:

https://codesandbox.io/s/twilight-platform-5p28y

Я получаю сообщение об ошибке:

You should not use <Route> or withRouter() outside a <Router>

Но я в роутере:

class Application extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Route
...

ReactDOM.render(<Application />, document.getElementById("root"));

Что именно здесь происходит?Почему React не думает, что я нахожусь внутри роутера?

Answer 1

Ну, во-первых, давайте вытащим эти компоненты (карты и карты) оттуда.Также кажется, что у Animated Switch есть некоторые проблемы (глядя на 23 проблемы на NPM).Так что я убрал это для тебя.Это будет работать.Также я удалил некоторый другой код в Index.js для моего собственного удобства (ваша история и тому подобное).Вам нужно будет добавить их обратно в

Создать Cards.js

import React, { Component, PropTypes } from "react";

class Cards extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["one", "two", "three", "four", "five", "six", "seven", "eight"]
    };
  }

  render() {
    return (
      <div className="cards">
        {this.state.list.map((carditem, index) => (
          <div className="card">{carditem}</div>
        ))}
      </div>
    );
  }
}

export default Cards;

, затем Создать map.js

import React, { Component, PropTypes } from "react";

class Map extends Component {
  render() {
    return <div>Map would appear here</div>;
  }
}

export default Map;

В Index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./styles.css";
import { AnimatedSwitch } from "react-router-transition";
import configureStore, { history } from "./store";
import { Provider, ReactReduxContext } from "react-redux";
import Cards from './Cards';
import Map from './Map';





const routing = (
  <Router>

    <Route exact path="/" component={Cards} />
    <Route path="/about/" component={Map}/>
</Router>
    )

    ReactDOM.render(routing, document.getElementById('root'));