Маршрутизация без рендеринга компонента - PullRequest
Новая
       4

Маршрутизация без рендеринга компонента

0 голосов
/ 09 февраля 2020

Ниже кода отображается список элементов.

Приложение. js

render() {
    return (
      <Router>
        <div className="App">
          <AppContext.Provider value={{ state: this.state }}>
            <ItemList />
            <Switch>
              <Route path="/detail/:id" component={ItemDetail} />
              <Route exact={true} path="/" component={ItemList} />
            </Switch>
          </AppContext.Provider>
        </div>
      </Router>
    );
  }

ItemList. js

render() {
    return (
      <AppContext.Consumer>
        {context => {
          return context.state.itemList.map(item => {
            return (
                <Link key={item.id} to={`/detail/${item.id}`}>
                  <p>{item.id}</p>
                </Link>
            );
          });
        }}
      </AppContext.Consumer>
    );
  }

ItemDetail. js

import React from "react";

export default function ItemDetail(props) {
  return <div>Item detail</div>;
}

при щелчке любого элемента в списке должна отображаться подробная информация об элементе (из компонента ItemDetail). проблема только в том, что url меняется на / detail / id, но компонент не меняется ie не меняется на ItemDetail. js

...