使用浏览器路由时未终止的jsx内容?

Posted

技术标签:

【中文标题】使用浏览器路由时未终止的jsx内容?【英文标题】:Unterminated jsx content while using browserroutes? 【发布时间】:2019-09-27 09:23:01 【问题描述】:

我想使用 browserroutes 和 react-router-dom 的路由通过应用程序中的 react 组件进行路由,但出现错误

错误:

Line 44:  Parsing error: Unterminated JSX contents

  42 |              <Route path='/edit' component=EditExpensePage />
  43 |          </div>
> 44 |      </BrowserRouter>
     |                      ^
  45 | );

__文件:__

import React from 'react';
import ReactDOM from 'react-dom';
import BrowserRouter,Route from 'react-router-dom';


const HelpPage =()=>
return(
    <div>
        This is from HelpPage
    </div>
);


const EditExpensePage =() =>
return(
    <div>
        This is from EditExpensePage
    <div>
);

const routes=(
    <BrowserRouter>
        <div>
            <Route path='/' component=HelpPage exact=true/>
            <Route path='/edit' component=EditExpensePage />
        </div>
    </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById('root'));

我已经尝试将它制作为无状态组件(路由)并将其呈现为反应组件,但它没有工作并且仍然给出未终止的 jsx 内容的错误

【问题讨论】:

可能是错字或未封闭的标签。你能告诉我们整个代码吗? 现在可以查看代码了 问题是EditExpensePage中的关闭&lt;div&gt;,应该是&lt;/div&gt; 【参考方案1】:

答案如下:

const EditExpensePage =() =>
return(
    <div>
        This is from EditExpensePage
    </div>
);

【讨论】:

以上是关于使用浏览器路由时未终止的jsx内容?的主要内容,如果未能解决你的问题,请参考以下文章

使用 browserify 时未定义 require 错误

简单理解JavaScript,TypeScript和JSX

JavaScript之jsx&react

React的jsx语法糖

`babel-preset-react` 不使用 gulp 转换 jsx

使用JSX的注意事项