React-router 路由不会触发

Question

首先，如果之前有人问过这个问题，我很抱歉。我目前是 react-router 的新手，我不知道该问什么。所以，我想在我的应用程序中制作一个侧边栏组件，这个侧边栏由 material-ui 抽屉 listItems 组成。每个 listItem 都有一个链接作为它的 containerElement 属性值。选择每个列表确实会更改 url，但不会显示每个路由应显示的组件。

这是我的代码：

App.js

import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Sidebar from './components/Sidebar'
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom'

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

const ListItem = () => (
  <div>
    <h2>List Item</h2>
  </div>
)

const CreateForm = () => (
  <div>
    <h2>Create Form</h2>
  </div>
)

const SearchItem = () => (
  <div>
    <h2>Search Item</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <Router>
          <div>
            <Sidebar />
            <Route exact path="/" component={ListItem}/>
            <Route path="/create" component={CreateForm}/>
            <Route path="/search" component={SearchItem}/>
          </div>
        </Router>
      </MuiThemeProvider>
    )
  }
}

export default App;

Sidebar.js

import React, {Component} from 'react'
import Drawer from 'material-ui/Drawer'
import {List, ListItem, makeSelectable} from 'material-ui/List'
import Subheader from 'material-ui/Subheader'
import {Link} from 'react-router-dom'

let SelectableList = makeSelectable(List)

function wrapState(ComposedComponent) {
  return class SelectableList extends Component {
    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      })
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      })
    }

    render() {
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
        </ComposedComponent>
      )
    }
  }
}

SelectableList = wrapState(SelectableList)

const ListSelectable = () => (
  <SelectableList defaultValue={1}>
    <Subheader>Basic CRUD operation</Subheader>
    <ListItem
      value={1}
      primaryText="List"
      containerElement={<Link to='/'/>}
    />
    <ListItem
      value={2}
      primaryText="Create"
      containerElement={<Link to='/create'/>}
    />
    <ListItem
      value={3}
      primaryText="Search"
      containerElement={<Link to='/search'/>}
    />
  </SelectableList>
);

class Sidebar extends Component {
  render() {
    return (
      <Drawer>
        <ListSelectable />
      </Drawer>
    )
  }
}

export default Sidebar

注意：我从 material-ui 文档复制的可选列表实现。

Answer 1

您的组件被侧边栏覆盖。试着在左边留一些边距。

import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Sidebar from './components/Sidebar'
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom'

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

const ListItem = () => (
  <div>
    <h2 style={{marginLeft:'300'}}>List Item</h2>
  </div>
)

const CreateForm = () => (
  <div>
    <h2 style={{marginLeft:'300'}}>Create Form</h2>
  </div>
)

const SearchItem = () => (
  <div>
    <h2 style={{marginLeft:'300'}}>Search Item</h2>
  </div>
)

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <Router>
          <div>
            <Sidebar />
            <Route exact path="/" component={ListItem}/>
            <Route path="/create" component={CreateForm}/>
            <Route path="/search" component={SearchItem}/>
          </div>
        </Router>
      </MuiThemeProvider>
    )
  }
}

export default App;