无法读取 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 绑定，您需要前一个包：

<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 自动关闭。

Answer 2

我怀疑问题出在您如何导入 React 路由器。使用 webpack 时，我使用的是 react-router-dom 包和 BrowserRouter

import { BrowserRouter as Router , Route, Switch} from 'react-router-dom'

哪些是 V4 的正确包。所以至少我认为你应该使用 cdn that provides react-router-dom

也尝试使用 BrowserRouter 而不是 Router。

除此之外，您可以立即关闭您的 Route 组件

<ReactRouter.Route path="/" component={App}/>

此外，我不理解您在代码中使用 insertion_point 的意图。

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

Cannot read property 'location' of undefined in React Router example

reactjs

react-router-v4

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

Cannot read property 'location' of undefined in React Router example

reactjs

react-router-v4

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