React-Router路由不会触发

Question

First, i am sorry if this problem has been asked before. I am currently new to react-router, i don't know what to ask. So, i am trying to make a sidebar component in my apps, this sidebar composed of material-ui drawer, listItems. Each listItem has a link i put as its containerElement attribute value. Selecting each list does change the url, but component that each route should display won't show.

Here is my code:

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

Note: The selectable list implementation i copied from material-ui docs.

Answer 1

Your component is covered by the sidebar. Try to put some margin on the left.

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;