React-router route won't trigger

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.

https://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786 — James111, Jul 27 '17 at 03:57
@James111 I visited the link you give, and checked his example repo. The implementation doesn't much differ than mine. Any hint why my code doesn't work ? — Afdal Lismen, Jul 27 '17 at 04:08
@James111 Moving my route to root component as used in that link you give me still not work, the link shown, url changed, but the route component doesn't get triggered. — Afdal Lismen, Jul 27 '17 at 04:20
I suggest you follow a tutorial such as this: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf Make sure your code follows the correct rules that react-router sets! — James111, Jul 27 '17 at 04:21
@James111 Ooh, my route does rendered, its render behind the material-ui drawer. Thank for the reply btw. — Afdal Lismen, Jul 27 '17 at 04:37

Hana Alaydrus · Accepted Answer · 2017-07-27T05:20:44.203

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;

Yes, it is, i just saw it. Any way to make the sidebar absolute so i don't need to add margin ? or different material-ui component maybe ? — Afdal Lismen, Jul 27 '17 at 04:44

React-router route won't trigger

1 Answers1

Linked