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;
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. – > .
- @SaifKhan se pare că ai o problemă cu rutele. Arată-ne codul rutelor. – > .
- Verificați acum, da, am verificat greșeala a fost acolo, ma rău – > .
- @SaifKhan Mi-am actualizat răspunsul. – > .
- Vă mulțumim pentru timpul acordat!!! 🙂 – > .
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 ? – > .
- Sigur. Vă rugăm să nu ezitați să mă întrebați – > .
- 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. – > .
- Adăugați „exact” în prima rută și citiți și despre asta. Acesta va rezolva problema – > .
- 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! 🙂 – > .
Î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
Routerare doar un singur copil. Poate probleme de cache? Sau bug-ul este undeva în codul dvs. – > Por marzelin.<BrowserRouter>poate avea doar un singur copil. Vedeți: github.com/ReactTraining/react-router/issues/4009 – > Por Spencer Wieczorek.