<Router>은 하위 요소가 하나만있을 수 있습니다. 반응이 잘못되었습니다.

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')); 

파일 : Home.js에 대한 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; 

있습니다 별도의 파일 , 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을 제거 도움이되는지 확인하십시오.