Reactjs 导航到URL时出现问题，如/注释列表/：id"；

我试图使用React Router的链接从注释列表导航到具体注释。但它没有渲染组件

因此，我有一个AnnotationList，其中包含所有注释。每个批注都有一个“”。在my Container.js中，我声明了如下路线：

<Route path="/annotationList/annView/:id" component={annView} />

在同一容器中，我有组件视图：

const annView = ({ match }) => {
    const { id } = match.params;
    console.log(id);
    return(
        <AnnotationView id={id} />
    )
}

const annView=（{match}）=>{
const{id}=match.params；
console.log（id）；
返回(
)
}

当我点击链接时，URL变为正确的，但它没有呈现任何内容。我做错了什么

如果有帮助的话，我会粘贴这两个js文件的完整代码

Container.js

import React from 'react';
import { Route, Switch, withRouter, Link } from "react-router-dom";
import ProductList from './List/ProductList';
import CustomersList from './List/CustomersList';
import AppointmentsList from './List/AppointmentsList';
import AnnotationList from './List/AnnotationList';
import AddProduct from './Post/AddProduct';
import '../styles/App.css';
import AnnotationView from './Item/AnnotationView';

function Container({ location }) {
    return (
        <div>
            <Switch location={location}>
                <Route path="/productsList" component={ProductList} />
                <Route path="/customersList" component={CustomersList} />
                <Route path="/appointmentsList" component={AppointmentsList} />
                <Route path="/annotationList" component={AnnotationList} />
                <Route path="/annotationList/annView/:id" component={annView} />
                <Route path="/addProduct" component={AddProduct} />
            </Switch>
        </div>
    );
}

const annView = ({ match }) => {
    const { id } = match.params;
    console.log(id);
    return(
        <AnnotationView id={id} />
    )
}

export default withRouter(Container);

从“React”导入React；
从“react router dom”导入{Route，Switch，withRouter，Link}；
从“./List/ProductList”导入ProductList；
从“/List/CustomersList”导入CustomersList；
从“/List/appointslist”导入任命列表；
从“/List/AnnotationList”导入注释列表；
从“/Post/AddProduct”导入AddProduct；
导入“../styles/App.css”；
从“./Item/AnnotationView”导入注释视图；
函数容器（{location}）{
返回(
);
}
const annView=（{match}）=>{
const{id}=match.params；
console.log（id）；
返回(
)
}
使用路由器（容器）导出默认值；

---

import React，{Component}来自'React'；
从“reactstrap”导入{Table}；
从'react router dom'导入{Link}；
从“../Item/AnnotationView”导入AnnotationView；
类注释列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
注释：[]，
孤岛加载：false
}
}
componentDidMount（）{
this.setState（{isLoading:true}）；
取（'http://localhost:8080/annotations')
.then（response=>response.json（））
.then（data=>this.setState（{annotations:data，isLoading:false}））；
}
render（）{
const{annotations，isLoading}=this.state；
如果（孤岛加载）{
返回加载…
；
}
返回(
阿诺塔奇奥尼斯
{annotations.map（（ann）=>
{ann.name}
{ann.text}
)}
)
}
}
导出默认注释列表；

---

提前感谢。

您的

链接中有一个打字错误

你在尝试匹配这条路线

但是您的
链接
有
注释
，带有s
/annotationsList/annView/anythingHere

您必须将
链接
组件更改为：

<Link to={`/annotationList/annView/${ann.id}`}>
  <th>{ann.name}</th>
</Link>

您是否尝试过像这样使用
exact
？尝试切换注释列表路径：
console.log-in-annView正确打印值？它没有打印任何内容，我想我没有正确调用它。我尝试了这两种方法，但仍然是一样的：（谢谢！！！我现在感到很尴尬…这么多小时。而且，我将从现在开始使用exact。非常感谢！@DavidVillanuevaGarcía我们大家都遇到了这种情况。很高兴能帮上忙！
<Link to={`/annotationList/annView/${ann.id}`}>
  <th>{ann.name}</th>
</Link>

function Container({ location }) {
    return (
        <div>
            <Switch location={location}>
                <Route path="/productsList" component={ProductList} />
                <Route path="/customersList" component={CustomersList} />
                <Route path="/appointmentsList" component={AppointmentsList} />
                <Route exact path="/annotationList" component={AnnotationList} />
                <Route path="/annotationList/annView/:id" component={annView} />
                <Route path="/addProduct" component={AddProduct} />
            </Switch>
        </div>
    );
}