Как передать реквизит на сопоставленный массив маршрутов в React Js

Question

Как вы передаете реквизиты на сопоставленный массив маршрутов?Допустим, у вас есть более 5 ссылок, и вы просто хотите сделать каждый маршрут как объект в массиве внутри вашего компонента маршрутов, при условии, что каждый необходимый компонент импортирован, вот мой компонент RouteList:

const routeList = [
  {
    path:"/",
    render: props => (<Home {...props} users={users} deleteUser={props.deleteUser} />)
  },
  {
    path:"/about",
    component:"About"
  }, etc];

class RouteList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const routeComponents = routelists.map(
      ({ path, component, render }, key) => (
        <Route
          exact
          path={path}
          component={component}
          render={render}
          key={key}
        />
      )
    );
    return <div>{routeComponents}</div>;
  }
}

export default RouteList;

Как выМожно видеть, что я добавил рендер как свойство объекта в домашний маршрут, чтобы я мог включить реквизиты.Теперь в моем App.js я импортировал приведенный выше RouteList следующим образом:

import RouteList from "./components/routelist";

class App extends React.Component {
  constructor(props) {
    super(props);
    UniqueId.enableUniqueIds(this);
    this.state = {
      users: [
        { id: this.nextUniqueId(), name: "Louise", age: 28 },
        { id: this.nextUniqueId(), name: "Karen", age: 24 },
        { id: this.nextUniqueId(), name: "Jared", age: 32 },
        { id: this.nextUniqueId(), name: "Noime", age: 28 }
      ]
    };
    this.deleteUser = this.deleteUser.bind(this);
  }

  deleteUser = (index, e) => {
    const { users } = this.state;
    const newUsers = Object.assign([], users);
    newUsers.splice(index, 1);
    this.setState({
      users: newUsers
    });
  };
  render() {
    const { users } = this.state;
    return (
      <Router>
        <div className="App">
          <Navigation />
          <main>
            <Switch>
              <RouteList users={users} />
            </Switch>
          </main>
        </div>
      </Router>
    );
  }
}

Я получаю ошибку ссылки: пользователи не определены в компоненте RouteList.или ошибка типа: «Невозможно прочитать свойство« карта »из неопределенного».

Вот мой компонент Home:

import React from "react";
import Users from "../users";

const HomePage = props => {
  return (
    <div className="contentContainer">
      <header className="pageHeader">
        <h1>Home</h1>
      </header>
      <ul id="user-list">
        {props.users.map((user, index) => {
          return (
            <Users
              age={user.age}
              key={user.id}
              index={index}
              deleteEvent={props.deleteUser}
            >
              {user.name}
            </Users>
          );
        })}
      </ul>
    </div>
  );
};

export default HomePage;

Answer 1

вы пытаетесь использовать реквизиты в массиве routeList, но вы не сможете получить доступ к реквизитам вне объявления класса, для этого предназначен метод constructor / super.

Вы также не объявленыRoutelists в любом месте, так что нечего сопоставлять.

Попробуйте что-то вроде этого:

 import Home from ....
 class RouteList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const routelists = [
      {
        path:"/",
        render: props => (<Home {...this.props} users={this.props.users} 
        deleteUser={this.props.deleteUser} />)
      },
      {
        path:"/about",
        component:"About"
      }, etc];

    const routeComponents = routelists.map(
      ({ path, component, render }, key) => (
        <Route
          exact
          path={path}
          component={component}
          render={render}
          key={key}
        />
      )
    );
    return <div>{routeComponents}</div>;
  }
}

export default RouteList;

Answer 2

переместить это внутрь метода рендеринга.

const routelists = [
  {
    path: "/",
    render: props => (
      <Home {...props} users={this.props.user} deleteUser={props.deleteUser} />
    )
  },
  {
    path: "/about",
    component: About
  }
];