Question

你能不能告诉我为什么路由器在反应js中是未定义的。我已经在我的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

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

const click2dial_Event = function(e) {
    e.preventDefault();

    let a = $(this), number;

    if (a.attr('href') !== '#') {
        number = a.attr('href');
        number = number.substr(4);

        a.attr('href', '#');
        a.attr('data-dial', number)
        a.addClass('click-to-dial');
    } else {
        number = a.attr('data-dial');
    }

    //...
};

$(document).on('mousedown', "a[href^='tel']", click2dial_Event);
$(document).on('mousedown', '.click-to-dial', click2dial_Event);

还请注意ReactRouter中的div标签，否则将收到“一台路由器可能只有一个子元素”错误。

Answer 2

根据documentation，当您通过<script>标记添加库时，该库将在window.ReactRouter上提供。

您可以在文件顶部添加以下作业：

{ Router } = ReactRouter;

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

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;

代码的开头

为什么路由器在反应中是未定义的？

4 个答案: