javascript-React-Router只有一个孩子

我继续得到错误:

“路由器”可能只有一个子元素

使用react-router时。

我似乎无法弄清楚为什么它不起作用,因为它就像它们在示例中显示的代码一样:[https://reacttraining.com/react-router/web/guides/quick-start]

这是我的代码:

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

感谢您的帮助

Marco asked 2019-10-04T14:20:55Z
7个解决方案
134 votes

您必须将<Switch>包裹在<div>(或<Switch>)中。

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

应该

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

jsfiddle / webpackbin

QoP answered 2019-10-04T14:21:21Z
35 votes

这是Switch 4.x中的API更改。建议的方法是将Routes包裹在Switch中:[https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357]

报价:

兑换

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

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

当然,您需要将Switch添加到您的导入中:

import { Switch, Router, Route } from 'react-router'
FeifanZ answered 2019-10-04T14:22:17Z
3 votes

我总是在React Web和Native(> = react 16)中使用Fragment

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
White Rabbit answered 2019-10-04T14:22:47Z
2 votes

我将所有<Route />标签都放在了<Switch> </Switch>标签中,如下所示。

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

这样就解决了问题。

Vishal Shetty answered 2019-10-04T14:23:23Z
1 votes

如果要在路由器中嵌套其他组件,则应该这样做。

  <Router>
     <div>
       <otherComponent/>
         <div>
           <Route/>  
           <Route/>
           <Route/>
           <Route/>
         </div>
      </div>
    </Router>
Chawki answered 2019-10-04T14:23:51Z
0 votes

当您在<Route>内部<Router>之前没有父标记时,会发生此问题,因此要解决此问题,请将<Route>封闭在父标记(如<div><p>等)中。范例-

<Router>
    <p>
       <Route path="/login" component={Login} />
       <Route path="/register" component={Register} />
    </p>
</Router>
MERLIN THOMAS answered 2019-10-04T14:24:22Z
0 votes

您还可以将所有路线包裹在默认为索引页面的父路线中

<Router history={history}>    
   <Route path="/" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>
Shadab Ahmed answered 2019-10-04T14:24:50Z
translate from https://stackoverflow.com:/questions/42992911/react-router-only-one-child