Ich bekomme immer wieder den Fehler:
Ein 'Router' darf nur ein untergeordnetes Element haben
bei Verwendung von React-Router.
Ich kann anscheinend nicht herausfinden, warum dies nicht funktioniert, da es genau dem Code entspricht, den sie in ihrem Beispiel zeigen: Schnellstart
Hier ist mein Code:
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'));
Danke fürs Helfen
javascript
reactjs
react-router
Marco
quelle
quelle
Link
,Route
) im InnerenBrowserRouter
müssen in einemdiv
Antworten:
Sie müssen Ihre
Route
in ein<div>
(oder ein<Switch>
) einwickeln .render(( <Router> <Route exact path="/" component={BaseLayer} /> <Route path="/editor" component={App} store={store} /> </Router> ), document.querySelector('#app'));
sollte sein
render(( <Router> <div> <Route exact path="/" component={BaseLayer} /> <Route path="/editor" component={App} store={store} /> </div> </Router> ), document.querySelector('#app'));
jsfiddle / webpackbin
quelle
Router
erwartetthis.props.children
werdennull
Länge gleich 1 oder zu habendiv
wird. Sie sollten esswitch
stattdessen verwenden. Dies macht die Route exklusiv github.com/ReactTraining/react-router/blob/master/packages/…Dies ist eine API-Änderung in
react-router
4.x
. Empfohlener Ansatz ist das Einschließen vonRoute
s inSwitch
: https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357Zitat:
Konvertieren
<Router> <Route ...> <Route ...> </Router>
zu
<Router> <Switch> <Route ...> <Route ...> </Switch> </Router>
Sie müssen natürlich
Switch
Ihre Importe ergänzen :import { Switch, Router, Route } from 'react-router'
quelle
4.x.x
Version vonreact-router
undrequire
oderimport
Switch
oben in Ihrem Modul verwendenWarning: Failed prop type: The prop
Historie als erforderlich markiert istRouter
, aber ihr Wert istundefined
.Ich benutze immer Fragment in React Web und 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
quelle
Ich habe alle meine
<Route />
Tags so in das<Switch> </Switch>
Tag eingefügt.<BrowserRouter> <Switch> <Route path='/' component={App} exact={true} /> <Route path='/form-example' component={FormExample} /> </Switch> </BrowserRouter>
Dies löst das Problem.
quelle
Wenn Sie andere Komponenten im Router verschachteln, sollten Sie dies tun.
<Router> <div> <otherComponent/> <div> <Route/> <Route/> <Route/> <Route/> </div> </div> </Router>
quelle
Wenn Sie Reach-Router verwenden, stellen Sie sicher, dass der Code folgendermaßen aussieht:
<Router> <Login path="/" /> <Login path="/login" /> </Router>
Wenn Sie diese Komponenten in einen
Div
im Fall von React-Routern aufnehmen, funktioniert dies, aber entfernen Sie in Reach-Routern das Div-Element.quelle
Sie können auch Ihre gesamte Route in eine übergeordnete Route einschließen, die standardmäßig die Indexseite verwendet
<Router history={history}> <Route path="/" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router>
quelle
Ich verwende
react-router-dom
Paket mit Version5.0.1
und es funktioniert perfekt mit Ihrem Code.import { BrowserRouter as Router , Router, Link } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; ... class App extends React.Component { render() { return ( <Router> <ul> <li><Link path='/'>Home</Link></li> <li><Link path='/about'>About</Link></li> </ul> <Route path='/' exact component={Home} /> <Route path='/about' component={About} /> </Router> ); } } export default App;
quelle
Ich bin mir nicht sicher, ob mein Router zu einfach ist oder ob diese Regel geändert wurde, aber ich folgte einem Tutorial, in dem diese Einschränkung erwähnt wurde ( ein 'Router' hat möglicherweise nur ein untergeordnetes Element ), und ich konnte 3 Routen hinzufügen, ohne dies anzugeben Fehler. Dies ist der Arbeitscode:
function render() { ReactDOM.render( <BrowserRouter> <Route exact path="/" component={App} /> <Route path="/add" component={AddAuthorForm} /> <Route path="/test" component={test} /> </BrowserRouter> , document.getElementById('root') ); }
Und das sind meine Abhängigkeiten:
"react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1",
quelle
Dieses Problem tritt auf, wenn Sie keinen übergeordneten Tag haben , bevor im
<Route>
Innern<Router>
so dieses Problem zu lösen , das hält<Route>
eingeschlossen in einem übergeordneten Tag wie<div>
,<p>
etc. Beispiel -<Router> <p> <Route path="/login" component={Login} /> <Route path="/register" component={Register} /> </p> </Router>
quelle