Sigo recibiendo el error:
Un 'Router' puede tener solo un elemento secundario
cuando se utiliza el enrutador de reacción.
Parece que no puedo entender por qué esto no funciona, ya que es exactamente como el código que muestran en su ejemplo: Inicio rápido
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'));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'));Este es un cambio de API en react-router 4.x El enfoque recomendado es envolver Route s en un Switch : https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357
Citando:
Convertir
<Router> <Route ...> <Route ...> </Router>para
<Router> <Switch> <Route ...> <Route ...> </Switch> </Router> Por supuesto, deberá agregar Switch a sus importaciones:
import { Switch, Router, Route } from 'react-router'Siempre uso Fragmento en reaccionar web y nativo (> = reaccionar 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