Question

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

不变违规：<Router>可能只有一个子元素

这是我在App.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

React Router v4，“路由器可能只有一个子元素”使用多个路由

1 个答案: