Это какая-то проблема с моей картой ниже, которая объявлена в приложении. js, потому что она работала раньше, и у меня есть мой маршрутный массив со всеми компонентами, по которым я хочу щелкнуть и выбрать из которых, но я не могу сделать Nave-бар шоу, нажав, например, на Добавить робота на моей кнопке? Я пытался долго с этим и интересно, правильно ли я объявил компонент = {}? У меня есть 5 Navbar и я хочу нажать на них, чтобы каждый компонент показывал по одному правильно! У меня есть объекты в моем массиве маршрутов, если я попытаюсь не объявлять component = {} с чем-то еще?. Как я могу заставить его отображать это правильно, не получая никакой ошибки при нажатии на вкладках моей навигационной панели, и чтобы не было ошибок.
Как мне переписать мой route.map, чтобы моя Nav-Bar работала?
{routes.map(({path, component:C}) => (
<Route
path={path}
component={<C/>}
/>))
}
Ниже мое приложение. js
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)