javascript - link - React-Router solo un niño

react>-< router

Question

Sigo recibiendo el error:

Un ''enrutador'' puede tener solo un elemento hijo

cuando use react-router.

Parece que no puedo entender por qué esto no funciona, ya que es exactamente como el código que muestran en su ejemplo: https://reacttraining.com/react-router/web/guides/quick-start

Aquí está mi código:

import React from ''react'';
import Editorstore from ''./Editorstore'';
import App from ''./components/editor/App'';
import BaseLayer from ''./components/baselayer'';
import {BrowserRouter as Router, Route} from ''react-router-dom'';
import {render} from ''react-dom'';

const root = document.createElement(''div'');
root.id = ''app'';
document.body.appendChild(root);

const store = new Editorstore();
const stylelist = [''https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'', ''https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css'', ''https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'', ''https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css''];

stylelist.map((link) => {
    const a = document.createElement(''link'');
    a.rel = ''stylesheet'';
    a.href = link;
    document.body.appendChild(a);
    return null;
});

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector(''#app''));

Gracias por ayudar

Answer 1

Este es un cambio de API en react-router 4.x El enfoque recomendado es envolver la Route s en un Switch : https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

Citando:

Convertir

<Router>
  <Route ...>
  <Route ...>
</Router>

a

<Router>
  <Switch>
    <Route ...>
    <Route ...>
  </Switch>
</Router>

Por supuesto, deberá agregar Switch a sus importaciones:

import { Switch, Router, Route } from ''react-router''

Answer 2

Este problema se produce cuando no tiene una etiqueta principal antes de <Route> dentro de <Router> por lo que para resolver este problema, mantenga <Route> encerrado en una etiqueta principal como <div> , <p> etc. Ejemplo:

<Router>
    <p>
       <Route path="/login" component={Login} />
       <Route path="/register" component={Register} />
    </p>
</Router>

Answer 3

Puse todas mis etiquetas <Route /> dentro de la etiqueta <Switch> </Switch> esta manera.

    <BrowserRouter>
        <Switch>
            <Route path=''/'' component={App} exact={true} /> 
            <Route path=''/form-example'' component={FormExample} />
        </Switch>
    </BrowserRouter>

Esto resuelve el problema.

Answer 4

Si está anidando otros componentes dentro del enrutador, debería hacer lo mismo.

  <Router>
     <div>
       <otherComponent/>
         <div>
           <Route/>  
           <Route/>
           <Route/>
           <Route/>
         </div>
      </div>
    </Router>

Answer 5

Siempre uso Fragment en react web y native (> = react 16)

import React, { Component, Fragment } from ''react''
import { NativeRouter as Routes, Route, Link } from ''react-router-native''
import Navigation from ''./components/navigation''    
import HomeScreen from ''./screens/home''
import { RecipesScreen } from ''./screens/recipe''

class Main extends Component {
  render() {
    return (
      <Fragment>
        <Navigation />
        <Routes>
          <Fragment>
            <Route exact path="/" component={HomeScreen} />
            <Route path="/recipes" component={RecipesScreen} />
          </Fragment>
        </Routes>
      </Fragment>
    )
  }
}

export default Main

Answer 6

También puede ajustar toda su ruta en una ruta principal que por defecto es la página de índice

<Router history={history}>    
   <Route path="/" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Answer 7

Tienes que envolver tus Route en un <div> (o un <Switch> ).

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector(''#app''));

debiera ser

render((
  <Router>
    <div>
       <Route exact  path="/" component={BaseLayer} />
       <Route path="/editor" component={App} store={store} />
    </div>
  </Router>
), document.querySelector(''#app''));

jsfiddle / webpackbin