Question

我很反应学习，我已开始使用react.js中的路由器。当我尝试创建路由器时，我收到此错误A <Router> may have only one child element Error in react。

我的代码如下：

文件： Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

文件： App.js

import React, { Component } from 'react';
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";

class App extends Component {
  render() {
    return (
      <HashRouter>
      <div>
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
           <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/stuff">Stuff</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
          </ul>
          </div>
         <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/stuff" component={Stuff}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
      </HashRouter>
    );
  }
} export default App;

Home.js，Stuff.js和Contact.js有单独的文件。

我甚至尝试使用Switch，但仍然遇到同样的错误。任何人都可以在这里说明这里出了什么问题吗？

Answer 1

你的App.js看起来很好。真奇怪。你确定你已经构建了这段代码吗？

您可以尝试将index.js更改为：

import React from 'react';
import {
  HashRouter
} from "react-router-dom";
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

从App.js中删除HashRouter。检查它是否有帮助。

Answer 2

我刚刚遇到了完全相同的错误，这是因为我复制粘贴了一些具有不间断空格字符（U + 00A0）而不是空格的代码，因此生成了额外的文本节点！用实际空间替换后，一切正常！

<router>可能只有一个子元素Error in react

2 个答案: