反应路由器路由不会触发

本文介绍了反应路由器路由不会触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

首先，如果之前有人问过这个问题，我很抱歉.我目前是 react-router 的新手，我不知道该问什么.所以，我试图在我的应用程序中制作一个侧边栏组件，这个侧边栏由 material-ui 抽屉、listItems 组成.每个 listItem 都有一个链接作为它的 containerElement 属性值.选择每个列表确实会更改 url，但不会显示每个路由应显示的组件.

这是我的代码:

App.js

import React, { Component } from 'react'从 'material-ui/styles/MuiThemeProvider' 导入 MuiThemeProvider从'./components/Sidebar'导入侧边栏进口 {BrowserRouter 作为路由器，路线，来自'反应路由器-dom'var injectTapEventPlugin = require("react-tap-event-plugin");注入TapEventPlugin();const ListItem = () =>(<div><h2>列表项</h2>

)const CreateForm = () =>(<div><h2>创建表单</h2>

)const SearchItem = () =>(<div><h2>搜索项目</h2>

)类 App 扩展组件 {使成为() {返回 (<MuiThemeProvider><路由器><div><侧边栏/><路由精确路径="/" component={ListItem}/><Route path="/create" component={CreateForm}/><Route path="/search" component={SearchItem}/>

</路由器></MuiThemeProvider>)}}导出默认应用程序；

侧边栏.js

import React, {Component} from 'react'从'material-ui/Drawer'导入抽屉从material-ui/List"导入 {List, ListItem, makeSelectable}从'material-ui/Subheader'导入子标题从 'react-router-dom' 导入 {Link}让 SelectableList = makeSelectable(List)函数 wrapState(ComposedComponent) {返回类 SelectableList 扩展组件 {componentWillMount() {this.setState({selectedIndex: this.props.defaultValue,})}handleRequestChange = (event, index) =>{this.setState({selectedIndex:索引，})}使成为() {返回 (<组合组件值={this.state.selectedIndex}onChange={this.handleRequestChange}>{this.props.children}</组合组件>)}}}SelectableList = wrapState(SelectableList)const ListSelectable = () =>(<SelectableList defaultValue={1}><Subheader>基本的CRUD操作</Subheader><列表项值={1}主要文本=列表"containerElement={<Link to='/'/>}/><列表项值={2}主要文本=创建"containerElement={<Link to='/create'/>}/><列表项值={3}主要文本=搜索"containerElement={<Link to='/search'/>}/></SelectableList>);类侧边栏扩展组件{使成为() {返回 (<抽屉><ListSelectable/></抽屉>)}}导出默认侧边栏

注意:我从 material-ui 文档中复制的可选列表实现.

解决方案

您的组件被侧边栏覆盖.尝试在左侧留一些边距.

import React, { Component } from 'react'从 'material-ui/styles/MuiThemeProvider' 导入 MuiThemeProvider从'./components/Sidebar'导入侧边栏进口 {BrowserRouter 作为路由器，路线，来自'反应路由器-dom'var injectTapEventPlugin = require("react-tap-event-plugin");注入TapEventPlugin();const ListItem = () =>(<div><h2 style={{marginLeft:'300'}}>列表项</h2>

)const CreateForm = () =>(<div><h2 style={{marginLeft:'300'}}>创建表单</h2>

)const SearchItem = () =>(<div><h2 style={{marginLeft:'300'}}>搜索项</h2>

)类 App 扩展组件 {使成为() {返回 (<MuiThemeProvider><路由器><div><侧边栏/><路由精确路径="/" component={ListItem}/><Route path="/create" component={CreateForm}/><Route path="/search" component={SearchItem}/>

</路由器></MuiThemeProvider>)}}导出默认应用程序；

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.

解决方案

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;