reactjs - 无法读取 React Router 示例中未定义的属性 'location'

Question

尝试使用 React Router 做最简单的示例。我看过的每个示例都非常不同，许多都包含 20 页的教程。我只想要一个简单的根路径:

...
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/react-router.min.js"></script>
...

var insert_point = document.querySelector('#container');

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul>
          <li>Home</li>
          <li>Stuff</li>
          <li>Contact</li>
        </ul>
        <div>
        </div>
      </div>
    )
  }
});

ReactDOM.render(
  <ReactRouter.Router>
    <ReactRouter.Route path="/" component={App}>
    </ReactRouter.Route>
  </ReactRouter.Router>,
  insert_point
);

Answer 1

由于您在浏览器中，因此您需要 react-router-dom v4 中也是一个单独的包。 react-router 仅包含核心，但对于 DOM 绑定(bind)，您需要前一个包:

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

然后，从全局 ReactRouterDOM 中获取您需要的内容。我发现使用 destructuring assignment 更容易得到你需要的东西:

var { BrowserRouter, Route } = ReactRouterDOM;

然后你可以这样做:

<BrowserRouter>
  <Route exact path="/" component={App} />
</BrowserRouter>

问题是您没有使用正确的路由器 - 对于网络使用 BrowserRouter。然后，使用 Route 并确保包含 exact 属性以仅匹配根路由，在这种情况下，您可以使 Route 自动关闭。