React Router v4，使用多个路由"A router may have only one child element"

Question

我正在尝试使用 react-router-dom 渲染侧边栏和主要内容区域。我可以正常渲染<Sidebar/>但我想将位置道具传递给它，因为我遇到了另一个错误，单击侧边栏中的<Link/>会更改 URL，但不会更新主要内容区域。因此，使用没有路径的路由渲染Sidebar组件，我认为将始终渲染Sidebar并让我传递位置。但是我收到此错误...

固定冲突：一个<Router>可能只有一个子元素

这是我在应用程序中的代码.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap/dist/css/bootstrap-theme.css'
import Sidebar from './components/Sidebar/sidebar'
import SidebarContent from './components/Sidebar/sidebar_content'
import Blank from './components/Blank/blank';
import Course from './components/Course/course';
import { Grid, Col, Row } from '../node_modules/react-bootstrap'
import {
  Route,
  BrowserRouter as Router,
  Switch,
  withRouter,
  Redirect,
  Link
} from 'react-router-dom'

class App extends Component {
  render() {
    const sidebar = <SidebarContent params={this.props.params}/>
    document.body.style.overflow = "hidden"
    const sidebarProps = {
      sidebar: sidebar,
      docked: true,
      shadow: false,
      touchHandleWidth: 20,
      dragToggleDistance: 30,
      touch: false,
      transitions: false,
      pullRight: false,
      open: true,
    }
    const CourseParent = (props) => {
      return(<Course courseID={props.courseID}/>);
    }
    const SidebarParent = (props) => {
      return(<Sidebar {...sidebarProps} className="Sidebar" location={props.location}/>);
    }

    return (
      <Router>
        <div>
          <Grid fluid={true}>
            <Row className="show-grid">
              <Col className="col-md-2" style={{height: '100vh', width: '175px'}}>
                {/* <Sidebar {...sidebarProps} className="Sidebar" location={location}/> */}
                  <div>
                    <Route render={({ location }) => (
                      <Sidebar {...sidebarProps} className="Sidebar" location={location}/>
                    )}/>
                  </div>
              </Col>
              <Col className="col-md-auto">
                  <Switch>
                    <Route exact path="/" component={Blank}/>
                    <Route path="/course/:courseID" component={CourseParent}/> 
                    <Redirect to="/" />
                  </Switch>
              </Col>
            </Row>
          </Grid>
        </div>
      </Router>
    );
  }
}
export default App;

Answer 1

整个应用程序中应该有一个，并且它只包含一个组件。您可以在此处找到有关此内容的详细信息：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf