Como soy completamente nuevo en React, estoy tratando de encapsular mi aplicación en el enrutador, pero recibo este error. Lo envolví en el div pero aún no funciona. ¿Alguien puede ayudarme? Lo siento si es una pregunta irrelevante o estúpida.

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

Cuando uso 1 ruta funciona pero cuando pongo 2 no funciona el error está aquí

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;
0
Saif Khan 7 sep. 2018 a las 23:52

3 respuestas

La mejor respuesta

Esto debería funcionar:

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

Según su actualización, debe envolver su enrutador con un div o puede usar el interruptor:

<BrowserRouter>
  <div>
      <Route exact={true} path='/' render={() => (
              <div>
                  <AddDetails />
              </div>
          )}/>
      <Route exact={true} path='details' render={() => (
                  <div>
                     <ShowDetails />
                  </div>
              )}/>
   </div>
</BrowserRouter>
2
Bhojendra Rauniyar 7 sep. 2018 a las 21:14

Agregue el enrutador de reacción Switch para representar solo un componente secundario

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>

Avísame si el problema persiste

1
Sakhi Mansoor 7 sep. 2018 a las 21:16

Elimine el apoyo de rutas y pase sus rutas como hijo de su div / Switch.

Verifique el inicio rápido: https: //github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/quick-start.md

0
idmitrov 7 sep. 2018 a las 21:18