A „A poate avea doar un singur element copil”, aceasta este eroarea pe care o primesc (Programare, Javascript, Reactjs)

Saif Khan a intrebat.
a intrebat.

Deoarece sunt complet nou în React, încerc să-mi înfășor aplicația în Router, dar primesc această eroare Am înfășurat-o în div, dar tot nu funcționează, mă poate ajuta cineva, vă rog?

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

Când folosesc 1 route funcționează dar când pun 2 nu funcționează eroarea este aici

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;

Comentarii

  • Nici un efect, aceeași eroare –  > Por Saif Khan.
  • Care este eroarea? –  > Por marzelin.
  • Un <Router> poate avea doar un singur element copil –  > Por Saif Khan.
  • Pot vedea clar că Router are doar un singur copil. Poate probleme de cache? Sau bug-ul este undeva în codul dvs. –  > Por marzelin.
  • Acest lucru se datorează faptului că <BrowserRouter> poate avea doar un singur copil. Vedeți: github.com/ReactTraining/react-router/issues/4009 –  > Por Spencer Wieczorek.
3 răspunsuri
Bhojendra Rauniyar

Acest lucru ar trebui să funcționeze:

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

Conform actualizării dvs., ar trebui să vă înfășurați Routerul cu un div sau puteți utiliza comutatorul:

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

Comentarii

  • Acest lucru nu explică de ce codul lui OP nu funcționează. De asemenea, nu există o diferență reală între acest lucru și OP în ceea ce privește eroarea. –  > Por Spencer Wieczorek.
  • @SaifKhan se pare că ai o problemă cu rutele. Arată-ne codul rutelor. –  > Por Bhojendra Rauniyar.
  • Verificați acum, da, am verificat greșeala a fost acolo, ma rău –  > Por Saif Khan.
  • @SaifKhan Mi-am actualizat răspunsul. –  > Por Bhojendra Rauniyar.
  • Vă mulțumim pentru timpul acordat!!! 🙂 –  > Por Saif Khan.
Sakhi Mansoor

Adăugați react router Switch pentru a reda doar o singură componentă copil

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>

Anunțați-mă dacă problema persistă în continuare

Comentarii

  • A fost rezolvată, vă mulțumesc, pot să vă cer puțin mai mult ajutor ? –  > Por Saif Khan.
  • Sigur. Vă rugăm să nu ezitați să mă întrebați –  > Por Sakhi Mansoor.
  • Am adăugat 2 rute în aplicația mea path= „/” și path=”detalii”, dar când fac clic pe link-ul de / funcționează, dar link-ul de pe detalii nu. –  > Por Saif Khan.
  • Adăugați „exact” în prima rută și citiți și despre asta. Acesta va rezolva problema –  > Por Sakhi Mansoor.
  • Bine, am făcut o greșeală foarte prostească și mi-am dat seama când am postat codul în întrebare și a fost foarte prostesc că l-am șters. Vă mulțumesc pentru ajutor! 🙂 –  > Por Saif Khan.
idmitrov

Îndepărtați recuzita rutelor și treceți rutele dvs. ca și copil al div/Switch-ului.

Verificați startul rapid:https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/quick-start.md