React-router route wird nicht ausgelöst

Question

Zuerst, es tut mir leid, wenn dieses Problem zuvor gestellt wurde. Ich bin derzeit neu im Reagieren-Router, ich weiß nicht was ich fragen soll. Also, ich versuche, eine Sidebar-Komponente in meinen Apps zu machen, diese Sidebar besteht aus Material-ui Schublade, listItems. Jedes listItem hat einen Link, den ich als containerElement-Attributwert angegeben habe. Das Auswählen jeder Liste ändert die URL, aber die Komponente, die jede Route anzeigen soll, wird nicht angezeigt.

Hier ist mein 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 

Hinweis: Die Auswahlliste Implementierung i von Material-ui-Dokumente kopiert.

Answer 1

Ihre Komponente wird von der Seitenleiste abgedeckt. Versuchen Sie, einen Rand auf der linken Seite zu setzen.

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;