Маршрут React-роутера не сработает

Question

Во-первых, я прошу прощения, если эта проблема была задана ранее. В настоящее время я новичок в реагирующем маршрутизаторе, я не знаю, что спросить. Итак, я пытаюсь сделать компонент боковой панели в своих приложениях, эта боковая панель состоит из ящика материалов, списков элементов. Каждый 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

Примечание. Реализация списка по выбору, которую я скопировал из материалов материалов.

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;