无法在反应路由器中获取未定义或空引用的属性“位置”

Question

我在反应路由器上做一个非常简单的程序..但我不知道这是怎么回事......这是我的反应路由器代码..

index.js

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { Router, browserHistory} from 'react-router';
    import routes from './routes';


    ReactDOM.render(
        <Router history={browserHistory} routes={routes} />
      , document.querySelector('.container'));

这里是路由文件..

routes.js

    import React, { Component } from 'react';
    import { Route, IndexRouter } from 'react-router';
    import App from './components/app';

    export default(
      <Route path="/" component={App} />
    );

它显示类似这样的错误...

Answer 1

您需要使用react-router-dom 而不是react-router。我已经为它创建了基本的代码沙箱你可以在这里查看代码。 https://codesandbox.io/embed/m779xxx4zy.

App.js

import React from "react";

const App = props => {
  return <div>HI</div>;
};

export default App;

Routes.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import App from "./app";

const Routes = props => {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={App} />
      </Switch>
    </div>
  );
};

export default Routes;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(
  <BrowserRouter>
    <Routes />
  </BrowserRouter>,
  document.querySelector(".container")
);