无法在React Router示例中读取未定义的属性“位置”

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

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

render

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

也尝试使用BrowserRouter而不是Router。

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

renderer

此外，我不理解您对THREE.DirectGeometry.fromGeometry(): Undefined vertexUv 18483 的意图，因为它们在您的代码中。