React-router route won't trigger - reactjs

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;