反應路由器路由不會觸發

Question

首先，我很抱歉如果此問題之前已被詢問。我目前是新來的反應路由器，我不知道該問什麼。所以，我試圖在我的應用中創建一個側邊欄組件，這個側邊欄由material-ui drawer，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 

注：可選擇列表實現我從材料的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;