A <Router>に子要素が1つのみ存在する可能性があります。

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を削除しますそれが役立つかどうか確認してください。