リアルータのルートはトリガーされません

Question

まず、この問題が以前に尋ねられた場合は申し訳ありません。私は現在、反応ルータに新しいです、私は何を尋ねるか分からない。だから、私は自分のアプリでサイドバーコンポーネントを作ろうとしています。このサイドバーは、マテリアルウイザードのリストアイテムで構成されています。各listItemには、containerElement属性値としてリンクiがあります。各リストを選択すると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 

注：私は材料-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;