私は非常に新しい学習のため、ルータとreact.js
で作業を開始しました。 ルータを作成しようとしているときに、このエラーが発生していますA <Router> may have only one child element Error in react
。次のようにA <Router>に子要素が1つのみ存在する可能性があります。
私のコードは次のとおりです。
ファイル: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
を使用しようとしましたが、それでも同じエラーが発生しました。 ここで間違っていることを誰かが示唆できますか?
あなたのコードは変更なしで問題なく動作しています。ここをクリックしてください: https://codesandbox.io/s/38zryy518q – Shishir
@Shishir:ローカル環境では動作しません。 –