问题背景
在使用 React Router 的时候，有可能会遇到 Unexpected token < 的错误。这个错误通常出现在渲染路由组件时，它表明你的应用程序无法正确解析该组件的 JSX 代码。
例如，下面的代码将渲染一个错误：
------ - ----- - ---- ------------------- ------ ------------- ----------------- --- ---
运行该代码将抛出 Unexpected token < 错误，因为 <About /> 是一个组件，而不是一个字符串。
解决方案
解决这个问题的方法很简单：将 component 属性改为 render 并传递一个函数，该函数返回要渲染的组件。
------ - ----- - ---- ------------------- ------ ------------- ---------- -- ------ --- ---
这样做的原因是，当您将组件作为函数传递给 render 属性时，React 将使用该函数的返回值来渲染路由组件，而不是将其视为字符串。
注意，如果你需要传递一些额外的 props 到被渲染的组件，可以像这样修改上述代码：
------ - ----- - ---- ------------------- ------ ------------- --------------- -- ------ ---------- ---------------- --- ---
这里的 props 参数包含一些路由信息和历史记录信息，你可以将其作为 props 传递给被渲染的组件。
示例代码
下面是一个使用 render 属性正确渲染路由组件的示例代码：
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
----- ---- - -- -- -
------ --------------
--
----- ----- - -- -- -
------ ---------------
--
----- --- - -- -- -
------ -
--------
------ ----- -------- ---------- -- ----- --- --
------ ------------- --------------- -- ------ ---------- ---------------- --- --
---------
--
--
------ ------- ----总结
React Router 是一个非常流行的路由库，但在使用它时可能会遇到 Unexpected token < 错误。这个错误通常是因为你试图将一个组件直接传递给 component 属性而导致的。解决这个问题的方法很简单：使用 render 属性并传递一个函数来渲染路由组件。希望这篇文章能对你理解和解决这个问题有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/30894