Reactjs React路由器链接更改URL ID，但组件不重新加载

我使用链接将项目列表重定向到另一个详图构件。但是现在URL会随着所选ID而更改，但不会调用detail组件。请帮我解决这个问题。下面是我的代码：

```
index.js
 <BrowserRouter>
   <Switch>
      <Route path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

```
index.js

CourseList.js
常量课程列表=（{Courses}）=>{
//地图列表
const renderedList=Courses.map（Courses=>{
返回(
查看更多
)
});
返回(
{renderedList}
);
}
导出默认课程列表；
CourseDetail.js
类CourseDetail扩展组件{
陈述={
ID:this.props.match.params.ID，
课程：空}；
componentDidMount（）{
//仅在加载URL时调用this.runSearch，而不是在单击链接//时调用
这是runSearch（）；
}
runSearch=async（）=>{
const response=await axios.get（'API\？{this.props.match.params.ID}'））
this.setState（{course:response.data}）；
}
render（）{
//下面的课程为空
//const course=this.state.course；
返回(
课程详细信息：ID{this.props.match.params.ID}
); }   
};
使用路由器导出默认值（CourseDetail）

您需要为您的

索引路由指定属性
exact
，否则即使是
/course/:ID
路由，它仍将与
/
匹配

请按如下方式更新您的
index.js文件

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>



希望这对你有用
 您需要为您的
indexRoute
指定属性
exact
，否则即使是
/course/:ID
路线，它仍将与
/
匹配

请按如下方式更新您的
index.js文件

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>

 <BrowserRouter>
   <Switch>
      <Route exact path='/' component={App} />
      <Route path='/course/:ID' component={CourseDetail} />
   </Switch>
</BrowserRouter>



希望这对你有用
 您需要更改
路由
声明的顺序
返回第一条匹配的路线，由于您的第一条路线是针对
/
，因此即使URL是针对ID为的课程详细信息，也会返回该路线

<Route path='/course/:ID' component={CourseDetail} />
<Route path='/' component={App} />

您需要更改
路由
声明的顺序
返回第一条匹配的路线，由于您的第一条路线是针对
/
，因此即使URL是针对ID为的课程详细信息，也会返回该路线

<Route path='/course/:ID' component={CourseDetail} />
<Route path='/' component={App} />

问题是您使用的是两个不同的路由器

为
/
路线添加
精确的



返回(
{renderedList}
)
问题在于您使用的是两个不同的路由器

为
/
路线添加
精确的



返回(
{renderedList}
)
谢谢大家的帮助！我在index.js中添加了{App}的精确路径，并在CourseList.js中删除了路由器，现在它可以工作了。谢谢大家的帮助！我在index.js中添加了{App}的精确路径，并在CourseList.js中删除了路由器，现在它可以工作了。