React-路由器只有一个子节点

我不断得到错误:

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

使用反应路由器时。

我似乎不能理解为什么这样不起作用，因为这与他们在示例中显示的代码完全一样: 快速开始

这是我的代码:

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'));
68806 次浏览
小开
最佳答案

你必须用 <div>(或者 <Switch>)来包装你的 Route。

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 网站 http://www.webpackbin.com/bins/-Kfz15YMXr44luMuLWLD 网站 http://www.webpackbin.com/bins/-Kfz15YMXr44luMuLWLD 网站 http://www.webpackbin.com/bins/-Kfz15YMXr44luMuLWLD

小开

这是 react-router 4.x中的 API 更改。推荐的方法是将 Route封装在 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'
小开

当 <Router>中的 <Route>之前没有父标记时，就会出现这个问题，所以为了解决这个问题，应该将 <Route>封装在父标记中，比如 <div>、 <p>等等。 例子-

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

我总是使用片段在反应网络和本地(> = 反应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
小开

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

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

这样问题就解决了。

小开

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

  <Router>
<div>
<otherComponent/>
<div>
<Route/>
<Route/>
<Route/>
<Route/>
</div>
</div>
</Router>
小开

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

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

我使用与版本 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;
小开

不知道我的路由器是不是太简单了，或者这个规则有所改变，但是我遵循了一个提到这个限制的教程(路由器可能只有一个子元素) ，它允许我添加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",
小开

如果您使用 到达路由器，请确保代码如下:

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

在反应路由器的情况下，在 Div中包含这些组件将使这个工作，但是在 Reach 路由器中，删除那个 Div 元素。


提交答案