Question

我是 ReactJS 的新手，我正在学习如何使用 react-router 进行路由，但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：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或a 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;

我建议您从this video观看Michael Jackson，如果您正在努力学习使用react-router和一些示例来解决您的问题。

反应路由器实现

1 个答案: