使用BrowserRouter路由React组件时遭遇未终止JSX内容解析错误

嘿，这个错误其实很好定位——问题出在你写的EditExpensePage组件里，JSX标签没有正确闭合！

看你这段代码：

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

最后一行的<div>应该是闭合标签</div>，JSX对标签闭合的要求很严格，不管是嵌套标签还是单标签，必须保证每个开启的标签都有对应的闭合标签，否则解析器就会抛出"未终止JSX内容"的错误。

修正后的完整代码 #

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标签都正确闭合就没问题，示例如下：

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

ReactDOM.render(<AppRouter />, document.getElementById('root'));

小提示 #

以后再遇到"Unterminated JSX contents"这类错误，第一时间检查所有JSX标签的闭合情况——不管是普通的嵌套标签，还是<input />、<Route />这类自闭合标签，确保语法正确就可以解决大部分此类问题啦。

内容的提问来源于stack exchange，提问作者Shiva Chandel