一个“A 可能只有一个子元素“这是我得到的错误

Question

由于我是React的新手，我正在尝试将我的应用程序包装在路由器中，但是我得到了这个错误，我将它包装在div中，但仍然无法工作，有人可以帮助我吗？对不起，如果它无关紧要或愚蠢的问题。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import routes from'./routes';
import {Router } from 'react-router-dom';
import history from './history';
import App from './App';

ReactDOM.render(
    <Router history={history} routes={routes} >
       <div>
           <App/>
       </div>
    </Router>, document.getElementById('root')); 

当我使用1路线时它可以工作，但是当我把它放在2时它不会出现错误

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import AddDetails from './components/AddDetails';
import ShowDetails from'./components/ShowDetails';
import NavBar from "./components/NavBar";

class App extends Component {
    render() {
        return (
            <div >
                <NavBar/>
                <BrowserRouter>

                   <Switch>
                        <Route exact={true} path='/' render={() => (
                            <div>
                                <AddDetails />
                            </div>
                        )}/>
                        <Route exact={true} path='details' render={() => (
                            <div>
                                <ShowDetails />
                            </div>
                        )}/>
                    </Switch>
               </BrowserRouter>

           </div>
        );
    }
}

export default App;

Answer 1

这应该工作：

ReactDOM.render((
  <Router history={history} routes={routes} >
     <App/>
  </Router>),
  document.getElementById('root')
);

---

根据您的更新，您应该使用div包装路由器，或者您可以使用switch：

<BrowserRouter>
  <div>
      <Route exact={true} path='/' render={() => (
              <div>
                  <AddDetails />
              </div>
          )}/>
      <Route exact={true} path='details' render={() => (
                  <div>
                     <ShowDetails />
                  </div>
              )}/>
   </div>
</BrowserRouter>

Answer 2

添加反应路由器Switch只渲染一个子组件

import {BrowserRouter, Route, Switch} from 'react-router-dom';


<BrowserRouter>

<Switch>
      <Route exact={true} path='/' render={() => (
              <div>
                  <AddDetails />
              </div>
          )}/>
              <Route exact={true} path='details' render={() => (
                  <div>
                     <ShowDetails />
                  </div>
              )}/>
   </div>
</BrowserRouter>

如果问题仍然存在，请告诉我

Answer 3

删除路径prop并将您的路由作为div / Switch的子路径传递。

检查快速入门：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/quick-start.md