Javascript React-Router 只有一个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42992911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Router only one child
提问by Marco
I keep on getting the error:
我不断收到错误：
A 'Router' may have only one child element
“路由器”可能只有一个子元素
when using react-router.
使用反应路由器时。
I can't seem to figure out why this is not working, since it's exactly like the code they show in their example: Quick Start
我似乎无法弄清楚为什么这不起作用，因为它与他们在示例中显示的代码完全一样：快速入门
Here is my 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'));
Thanks for helping
谢谢你的帮助
回答by QoP
You have to wrap your Route's in a <div>(or a <Switch>).
您必须将Route's包裹在 a <div>（或 a <Switch>）中。
render((
<Router>
<Route exact path="/" component={BaseLayer} />
<Route path="/editor" component={App} store={store} />
</Router>
), document.querySelector('#app'));
should be
应该
render((
<Router>
<div>
<Route exact path="/" component={BaseLayer} />
<Route path="/editor" component={App} store={store} />
</div>
</Router>
), document.querySelector('#app'));
回答by FeifanZ
This is an API change in react-router4.x. Recommended approach is to wrap Routes in a Switch: https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357
这是react-router4.x. 推荐的方法是将Routes包装在一个Switch：https: //github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357
Quoting:
引用：
Convert
转变
<Router>
<Route ...>
<Route ...>
</Router>
to
到
<Router>
<Switch>
<Route ...>
<Route ...>
</Switch>
</Router>
You will, of course, need to add Switchto your imports:
当然，您需要Switch在导入中添加：
import { Switch, Router, Route } from 'react-router'
回答by White Rabbit
I Always use Fragment in react web and native ( >= react 16 )
我总是在 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
回答by Vishal Shetty
I put all my <Route />tags inside the <Switch> </Switch>tag like this.
我把我所有的<Route />标签都放在这样的<Switch> </Switch>标签中。
<BrowserRouter>
<Switch>
<Route path='/' component={App} exact={true} />
<Route path='/form-example' component={FormExample} />
</Switch>
</BrowserRouter>
This solves the problem.
这解决了问题。
回答by UA_
If you are nesting other components inside the Router you should do like.
如果您在路由器内嵌套其他组件，您应该这样做。
<Router>
<div>
<otherComponent/>
<div>
<Route/>
<Route/>
<Route/>
<Route/>
</div>
</div>
</Router>
回答by Shadab Ahmed
you can also wrap all your route in a parent route which defaults to index page
您还可以将所有路线包装在默认为索引页面的父路线中
<Router history={history}>
<Route path="/" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
回答by Lang React Dev
I am using react-router-dompackage with version 5.0.1and it works perfectly fine with your code.
我正在使用react-router-dom带有版本的包，5.0.1它与您的代码完美配合。
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;
回答by Mario Perez
Not sure if my router might be too simple, or there was a change to this rule but was following along a tutorial that mentioned this limitation (A 'Router' may have only one child element) and it allowed me to add 3 routes without giving any errors. This is the working code:
不确定我的路由器是不是太简单了，或者这条规则发生了变化，但遵循了一个提到这个限制的教程（“路由器”可能只有一个子元素），它允许我添加 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')
);
}
And this are my dependencies:
这是我的依赖项：
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
回答by MERLIN THOMAS
This problem occurs when you don't have parent tag before <Route>inside <Router>so to resolve this problem keep the <Route>enclosed in a parent tag such as <div>, <p>etc.
Example -
出现此问题时，你没有父标签之前<Route>里面<Router>这样来解决这一问题保持<Route>封闭在一个父标签如<div>，<p>等为例-
<Router>
<p>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
</p>
</Router>
