React-Router 只有一个孩子

Question

我不断收到错误：

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

使用 react-router 时。

我似乎无法弄清楚为什么这不起作用，因为它与他们在示例中显示的代码完全相同：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'));

Answer 1

您必须将您的Route 包装在<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

Answer 2

这是 react-router 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'

Answer 3

我总是在 react web 和 native 中使用 Fragment (>= 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 4

我把我所有的<Route />标签都放在<Switch> </Switch>标签中，就像这样。

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

这样就解决了问题。

Answer 5

如果您在路由器中嵌套其他组件，您应该这样做。

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

Answer 6

如果您使用Reach Routers，请确保代码如下所示：

<Router>
    <Login path="/" />
    <Login path="/login" />
</Router>

在 React 路由器的情况下，将这些组件包含在 Div 中将使其工作，但在 Reach 路由器中，删除该 Div 元素。

Answer 7

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

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

Answer 8

我正在使用版本为5.0.1 的react-router-dom 包，它与您的代码完美配合。

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;

Answer 9

不确定我的路由器是否过于简单，或者此规则发生了更改，但遵循了提到此限制的教程（“路由器”可能只有一个子元素）它允许我添加 3 条路线而不会出现任何错误。这是工作代码：

function render() {
  ReactDOM.render(
    <BrowserRouter>
      <Route exact path="/" component={App} />
      <Route path="/add" component={AddAuthorForm} />
      <Route path="/test" component={test} />
    </BrowserRouter>
    ,
    document.getElementById('root')
  );
}

这是我的依赖项：

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",

Answer 10

当您在 <Route>inside <Router> 之前没有父标签时会出现此问题，因此要解决此问题，请将 <Route> 包含在父标签中，例如 <div> ，<p> 等。 示例 -

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