<Route> 不显示组件

Posted 2023-02-22

【中文标题】<Route> 不显示组件

【英文标题】：<Route> not showing component

【发布时间】：2020-04-08 02:58:07

【问题描述】：

我有一个MainRouter.js，它封装了我所有的路线。

<Home> 组件呈现，但用户组件不呈现，我收到 Cannot /GET users 错误

MainRouter.js：

import React, Component from 'react'
import Route, Switch from 'react-router-dom'
import Home from './core/Home'
import Users from './user/Users'  
class MainRouter extends Component 
  render() 
    return (
     <div>
      <Switch>
        <Route exact path="/" component=Home/>
        <Route path="/users" component=Users/>
      </Switch>
    </div>)
  


export default MainRouter

Users.js下./user/Users.js组件：

// import statements
// ...
class Users extends Component 
  state =  users: []
  render() 
    const classes = this.props
    return (
        <List dense>
         this.state.users.map((item, i) => 
          return <Link to="/user/" + item._id key=i>

                      <ListItemText primary=item.name/>
                      <ListItemSecondaryAction>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton>
                      </ListItemSecondaryAction>
                    </ListItem>
                 </Link>
               )
             
        </List>
    )
  


Users.propTypes = 
  classes: PropTypes.object.isRequired


export default withStyles(styles)(Users) 

是客户端渲染的问题还是服务器端渲染的问题？

【参考方案1】：

在Users.js 中尝试语法export default withStyles(styles)(Users)。 Users 组件应作为对象传递。

【讨论】：

我希望你的路由被包裹在来自react-router-dom的<BrowserRouter>组件中？

是的，MainRouter 嵌入在 BrowserRouter <BrowserRouter> <MainRouter/></BrowserRouter>

如果将output.publicPath = '/' 和devServer.historyApiFallback = true 添加到您的Webpack 配置可以解决您的问题，请告诉我。您可以在这里参考：***.com/questions/43209666/…