javascript - 一个“一个可能只有一个子元素”这是我得到的错误
问题描述
由于我对 React 完全陌生,我正在尝试将我的应用程序包装在路由器中,但我收到此错误,我将它包装在 div 中但仍然无法工作,有人可以帮助我吗?对不起,如果它不相关或愚蠢的问题。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import routes from'./routes';
import {Router } from 'react-router-dom';
import history from './history';
import App from './App';
ReactDOM.render(
<Router history={history} routes={routes} >
<div>
<App/>
</div>
</Router>, document.getElementById('root'));
当我使用 1 条路线时,它可以工作,但是当我放 2 条路线时,错误就在这里
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import AddDetails from './components/AddDetails';
import ShowDetails from'./components/ShowDetails';
import NavBar from "./components/NavBar";
class App extends Component {
render() {
return (
<div >
<NavBar/>
<BrowserRouter>
<Switch>
<Route exact={true} path='/' render={() => (
<div>
<AddDetails />
</div>
)}/>
<Route exact={true} path='details' render={() => (
<div>
<ShowDetails />
</div>
)}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
解决方案
这应该有效:
ReactDOM.render((
<Router history={history} routes={routes} >
<App/>
</Router>),
document.getElementById('root')
);
根据您的更新,您应该用 div 包裹路由器,或者您可以使用 switch:
<BrowserRouter>
<div>
<Route exact={true} path='/' render={() => (
<div>
<AddDetails />
</div>
)}/>
<Route exact={true} path='details' render={() => (
<div>
<ShowDetails />
</div>
)}/>
</div>
</BrowserRouter>
推荐阅读
- ios - React-Native iOS 状态栏
- react-native - FlatList renderItem 无法读取状态
- bitbucket - 如何在 BitBucket CI 上重新运行特定步骤?
- git - 我如何使用特定于 repo 的 VIM 撤消目录(undodir)而不向克隆 repo 的每个人透露我的路径结构?
- blogger - 如何将普通 XML 模板转换为 AMP 版本?
- python - 在 Python Django 中使用一个帐户进行多用户身份验证?
- python - 查找不同年份同一日期的平均值
- visual-studio - 当前文件中下一个错误的Visual Studio快捷方式?
- asp.net - Web Config 转换:如果应用设置值为 true 或 false,则插入
- java - 使用 ReactJS 实现 Spring Boot