阵营路由器实现

Question

我是新来ReactJS和我正在学习如何使用反应路由器路由，但react-router documentation也不过才到我的无奈的来源，所以我必须去别的地方了解它。

这是我的代码：

ReactDOM.render((
     <ReactRouter> 
      <ReactRouter.Route path="/" component={App}> 
       <ReactRouter.Route path="create" component={CreateRecipe} /> 
       <ReactRouter.Route path=":id" component={ShowRecipe}> 
        <ReactRouter.Route path="edit" component={EditRecipe} /> 
        <ReactRouter.Route path="delete" component={DeleteRecipe} /> 
       </ReactRouter.Route> 
      </ReactRouter.Route> 
     </ReactRouter> 
    ), document.getElementById("app-container")); 

但是，当在浏览器上我得到了我的浏览器的控制台下面的错误加载。

警告： React.createElement：类型不能为空，未定义，布尔或数字。它应该是一个字符串（用于DOM元素）或ReactClass（用于复合组件）。

请问可能是什么原因，我该如何解决它？

Answer 1

你的路由应该被封装在路由器内，所以<ReactRouter>应该是<ReactRouter.Router>。

ReactDOM.render((
    <ReactRouter.Router> 
     <ReactRouter.Route path="/" component={App}> 
      <ReactRouter.Route path="create" component={CreateRecipe} /> 
      <ReactRouter.Route path=":id" component={ShowRecipe}> 
       <ReactRouter.Route path="edit" component={EditRecipe} /> 
       <ReactRouter.Route path="delete" component={DeleteRecipe} /> 
      </ReactRouter.Route> 
     </ReactRouter.Route> 
    </ReactRouter.Router> 
), document.getElementById("app-container")); 

如果你想清理你的代码，你可以更换所有你ReactRouter.Router通过Router和ReactRouter.Route通过Route，然后调整代码：

var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 

我建议你从Michael Jackson，如果你”看this video再次与文档一起努力去掌握使用react-router和几个例子你能做些什么。