我正在使用react-router-dom v6，“React”：“^18.2.0”，并且无法呈现详细信息组件。这是我的传送：

function Routing() {
  return (
   <BrowserRouter>
      <Routes>
        <Route path="/" element={<List />} />         
        <Route path="details/:id" element={<Details />} />
        <Route path="other" element={<Other />} />
      </Routes>
    </BrowserRouter>
  );
}

我正在使用此文件尝试访问Details组件：

<Link to={'details' + `/${props.id}`}/>

详细信息组件的基本结构如下：

import react from 'React'

const Details = () => {
   return (<h1>HELLO</h1>)
}

export default Details;

但是组件不会呈现，并且我收到警告“没有与位置匹配的路径“/details/weI 4 qFO 9/UW 9v 5 WFllYhFw =="”
这是唯一的动态路由，将不会呈现组件。任何想法，我做错了什么或遗漏？