Afdal Lismen Afdal Lismen - 1 year ago 72
React JSX Question

React-router route won't trigger

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 Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download