为什么在React JS中未定义路由器？

Question

你能告诉我为什么在react js中未定义router吗？我已经在codepen中导入了react-router.js文件

这是我的代码http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {

    render() {
        return <Router>
          <Route path='/' component={first}></Route>
         <Route path='/about' component={second}></Route>
        </Router>
    }

}

class second extends React.Component {

    render() {
        return <label>second component</label>
    }

}
class first extends React.Component {

    render() {
        return <label>first component</label>
    }

}

React.render( < App / > , document.getElementById('app'))

Answer 1

根据文档 ，当您通过<script>标记包含库时，该库将在window.ReactRouter上window.ReactRouter 。

您可以在文件顶部添加以下分配：

{ Router } = ReactRouter;

这会将Router组件从react-router暴露给变量Router ，这是您的代码所期望的。

Answer 2

您需要使用BrowserRouter（react-router-dom）软件包而不是Router。 您的代码如下所示：

<div>
<ReactRouter.Route path='/' component={first}></ReactRouter.Route>
<ReactRouter.Route path='/about' component={second}></ReactRouter.Route>
</div>

还要注意ReactRouter中的div标签，否则会出现“一台路由器可能只有一个子元素”错误。

Answer 3

您可能需要准备好返回的JSX：

return (
  <Router>
    <Route path='/' component={first}></Route>
    <Route path='/about' component={second}></Route>
  </Router>
)

Answer 4

删除脚本标签时，应初始化别名。

尝试类似：

var Router  = window.ReactRouter;
var Route  = window.ReactRouter.Ruote;

在代码的开头