Reactjs 如何使routes.map正确显示我的组件
在App.js中声明的下面的地图有点问题，因为它以前工作过，我的路线阵列中有我想要点击和选择的所有组件，但我不能通过点击来显示导航栏，例如在我的按钮上添加机器人？ 我已经尝试了很长时间，不知道我是否正确地声明了component={}？ 我有5个导航栏，想点击它们，这样每个组件一次都能正确显示一个！ 我的routes数组中有对象，我是否应该尝试不使用其他东西声明component={}。如何使它正确显示此内容，而在单击导航栏选项卡时不会出现任何错误，并且不会出错 我应该如何重写routes.map，使导航栏正常工作Reactjs 如何使routes.map正确显示我的组件,reactjs,react-redux,react-router-dom,Reactjs,React Redux,React Router Dom,在App.js中声明的下面的地图有点问题，因为它以前工作过，我的路线阵列中有我想要点击和选择的所有组件，但我不能通过点击来显示导航栏，例如在我的按钮上添加机器人？ 我已经尝试了很长时间，不知道我是否正确地声明了component={}？ 我有5个导航栏，想点击它们，这样每个组件一次都能正确显示一个！ 我的routes数组中有对象，我是否应该尝试不使用其他东西声明component={}。如何使它正确显示此内容，而在单击导航栏选项卡时不会出现任何错误，并且不会出错 我应该如何重写routes.ma
{routes.map(({path, component:C}) => (
<Route
path={path}
component={<C/>}
/>))
}
{routes.map（{path，component:C}）=>(
))
}
import React, { Component } from 'react';
import {
Link,
Route,
Switch
} from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { connect } from 'react-redux';
import {
setSearchField,
requestRobots,
setName,
setUserName,
setEmail,
addRobot,
updateRobot,
deleteRobot
} from '../actions';
import CardList from '../components/CardList';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import AddRobot from '../components/AddRobot';
import UppdateRobot from '../components/UpdateRobot';
import DeleteRobot from '../components/DeleteRobot';
import NavBar from '../components/NavBar.js';
import './App.css';
// parameter state comes from index.js provider store state(rootReducers)
const mapStateToProps = (state) => {
return {
searchField: state.searchRobots.searchField,
robots: state.manage_data.robots,
isPending: state.manage_data.isPending,
name: state.manage_data.name,
username: state.manage_data.username,
email: state.manage_data.email,
}
}
// dispatch the DOM changes to call an action. note mapStateToProps returns object, mapDispatchToProps returns function
// the function returns an object then uses connect to change the data from redecers.
const mapDispatchToProps = (dispatch) => {
return {
onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
onRequestRobots: () => dispatch(requestRobots()),
get_name: (event) => dispatch(setName(event.target.value)),
get_username: (event) => dispatch(setUserName(event.target.value)),
get_email: (event) => dispatch(setEmail(event.target.value)),
add_robot: () => dispatch(addRobot()),
uppdate_robot: () => dispatch(updateRobot())
}
}
///{path:'/delRobo',
/// component:'SearchBox',
///searchChange: (id) => onSearchChange(id)
///},
class App extends Component {
componentDidMount() {
console.log(this.props.userinfo);
this.props.onRequestRobots();
}
render() {
const {
robots,
searchField,
onSearchChange,
isPending,
get_name,
name,
get_username,
username,
get_email,
email,
add_robot,
uppdate_robot
} = this.props;
const stylecur = {
fill: 'currentcolor'
};
const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(searchField.toLowerCase());
})
const routes = [{
path: '/addRobo',
component: AddRobot,
},
{
path: '/updateRobo',
component: UppdateRobot,
},
{
path: '/searchRobo',
component: SearchBox,
}
];
return ( <
Router >
<
div className = 'tc' >
<
header className = "bg-white black-80 tc pv4 avenir" >
<
a href = ""
className = "bg-black-80 ba b--black dib pa3 w2 h2 br-100" >
<
svg className = "white"
data - icon = "skull"
viewBox = "0 0 32 32"
style = {
stylecur
} >
<
title > skull icon < /title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path > < /svg> <
/a> <
h1 className = "mt2 mb0 baskerville i fw1 f1" > RoboFriends < /h1> <
h2 className = "mt2 mb0 f6 fw4 ttu tracked" > Create an ensembe of Robot with your friends! < /h2> <
nav className = "bt bb tc mw7 center mt4" >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-lightest-blue dib pa3 ph4-l"
href = "/" > Home < /a> <
a className = "f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > < Link to = {
'/addRobo'
}
className = "nav-link" > Add Robot < /Link></a >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-light-blue dib pa3 ph4-l" > < Link to = {
'/updateRobo'
}
className = "nav-link" > Update Robot < /Link></a >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-light-pink dib pa3 ph4-l" > < Link to = {
'/searchRobo'
}
className = "nav-link" > Search Robot < /Link></a >
<
a className = "f6 f5-l link bg-animate black-80 hover-bg-light-yellow dib pa3 ph4-l" > < Link to = {
'/delRobo'
}
className = "nav-link" > Delete Robot < /Link></a >
<
/nav> <
/header> <
Switch > {
routes.map(({
path,
component: C
}) => ( <
Route path = {
path
}
component = {
< C / >
}
/>))} <
/Switch> <
Scroll > {
isPending ? < h1 > Loading < /h1> : <
ErrorBoundry >
<
CardList robots = {
filteredRobots
}
/> <
/ErrorBoundry>
} <
/Scroll> <
/div> <
/Router>
);
}
}
// action done from mapDispatchToProps will channge state from mapStateToProps
export default connect(mapStateToProps, mapDispatchToProps)(App)
import React，{Component}来自'React'；
进口{
链接
路线,，
转换
}从“反应路由器dom”；
从“react Router dom”导入{BrowserRouter as Router}；
从'react redux'导入{connect}；
进口{
塞斯菲尔德，
机器人，
集合名，
setUserName，
setEmail，
addRobot，
更新机器人，
删除机器人
}来自“../actions”；
从“../components/CardList”导入卡片列表；
从“../components/SearchBox”导入SearchBox；
从“../components/Scroll”导入滚动；
从“../components/ErrorBoundry”导入ErrorBoundry；
从“../components/AddRobot”导入AddRobot；
从“../components/UpdateRobot”导入UppdateRobot；
从“../components/DeleteRobot”导入DeleteRobot；
从“../components/NavBar.js”导入导航栏；
导入“/App.css”；
//参数状态来自index.js提供程序存储状态（rootReducers）
常量mapStateToProps=（状态）=>{
返回{
searchField:state.searchRobots.searchField，
机器人：state.manage_data.robots，
isPending:state.manage_data.isPending，
名称：state.manage_data.name，
用户名：state.manage_data.username，
电子邮件：state.manage_data.email，
}
}
//分派DOM更改以调用操作。注意：mapStateToProps返回对象，mapDispatchToProps返回函数
//该函数返回一个对象，然后使用connect更改redecers中的数据。
const mapDispatchToProps=（调度）=>{
返回{
onSearchChange：（事件）=>调度（setSearchField（event.target.value）），
onRequestRobots:（）=>调度（requestRobots（）），
get_name：（event）=>dispatch（setName（event.target.value）），
get_username：（event）=>dispatch（setUserName（event.target.value）），
get_email：（event）=>dispatch（setEmail（event.target.value）），
添加机器人：（）=>调度（addRobot（）），
uppdate_机器人：（）=>调度（updateRobot（））
}
}
///{路径：'/delRobo'，
///组件：'SearchBox'，
///searchChange：（id）=>onSearchChange（id）
///},
类应用程序扩展组件{
componentDidMount（）{
log（this.props.userinfo）；
this.props.onRequestRobots（）；
}
render（）{
常数{
机器人，
searchField，
在研究变化方面，
iSping，
得到你的名字，
名称
获取您的用户名，
用户名，
收到你的电子邮件，
电子邮件，
加上机器人，
机器人
}=这是道具；
常量stylecur={
填充：“当前颜色”
};
常量过滤器机器人=机器人。过滤器（机器人=>{
return robot.name.toLowerCase（）.includes（searchField.toLowerCase（））；
})
常数路由=[{
路径：'/addRobo'，
组件：AddRobot，
},
{
路径：'/updateRobo'，
组件：机器人，
},
{
路径：'/searchRobo'，
组件：搜索框，
}
];
报税表（<
路由器>
<
div className='tc'>
<
header className=“bg黑白-80 tc pv4 avenir”>
<
a href=“”
className=“bg-black-80 ba b——黑色dib pa3 w2 h2 br-100”>
<
svg className=“白色”
数据-icon=“骷髅”
viewBox=“0 32”
样式={
stylecur
} >
<
标题>头骨图标<
/a><
h1 className=“mt2 mb0巴斯克维尔一世fw1 f1”>RoboFriends<
h2 className=“mt2 mb0 f6 fw4 ttu tracked”>与您的朋友一起创建一组机器人！<
nav className=“bt bb tc mw7中心mt4”>
<
a className=“f6 f5-l链接bg动画黑色-80悬停bg最浅蓝色dib pa3 ph4-l”
href=“/”>Home<
a className=“f6 f5-l链接bg动画黑色-80悬停bg浅绿色dib pa3 ph4-l”>添加机器人
<
{routes.map(({ path, component: Component }) => (
<Route
path={path}
component={Component} // sans the angle brackets </>
/>))
}