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似乎还存在一些问题（查看NPM上的23个问题）。所以我为您删除了它。这将运行。为了方便我也删除了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'));

“您不应该在<Router>之外使用<Route>或withRouter（）”-但我在路由器中

1 个答案: