"You should not use <Route> or withRouter() outside a <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"));

到底发生了什么？为什么反应不认为我在路由器内？

Answer 1

首先让那些组件(卡片和地图(从那里取出。同样，动画开关似乎有一些问题(在NPM上查看23个问题(。所以我为你删除了它。这将运行。我也为自己的便利(您的历史记录(删除了index.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'));