路由未渲染组件

Question

下面的代码显示项目列表。

App.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，但组件未更改，即未更改为ItemDetail.js