React-router-dom中如何创建可重置全路径的直接跳转Link

• React Router 中 Link 组件的 to 属性如果传入**不带开头斜杠 /**的字符串，会被识别为相对路径，跳转时自动拼接当前页面的路径前缀，这就是你在 /tododetails/some_id 路径下点击跳转时出现路径叠加的核心原因。
• 直接填写完整域名的写法也不符合单页内部路由规则，Link 不会识别外部域名格式，只会将完整域名当作普通路径字符串拼接，所以会出现更严重的路径错误。如果需要跳转到站点外的地址，应该使用原生 <a> 标签而非 Link。

只需修改所有全局导航栏的 Link to 属性，在路径开头添加斜杠 /，声明为从应用根路径出发的绝对路由即可，原有 Route 路由配置不需要修改。修改后的导航代码如下：

<BrowserRouter>
  <ul>
    <li><Link to="/todolist">Todo List</Link></li>
    <li><Link to="/todoform">Todo Form</Link></li>
    <li><Link to="/noteslist">Notes List</Link></li>
    <li><Link to="/notesform">Notes Form</Link></li>
  </ul>

  <Route exact path="/todolist" component={TodoList} />
  <Route exact path="/todoform" component={TodoForm} />
  <Route exact path="/todoform/:id" component={TodoForm} />
  <Route exact path="/tododetails/:id" component={TodoDetails} />

  <Route exact path="/noteslist" component={NotesList} />
  <Route exact path="/notesform" component={NotesForm} />
  <Route exact path="/notesform/:id" component={NotesForm} />
  <Route exact path="/notesdetails/:id" component={NotesDetails} />
</BrowserRouter>

如果是页面内的相对路径跳转场景（比如在 /todolist 路径下跳转到 /todolist/[id] 详情页），才需要使用不带开头斜杠的相对路径写法。

内容的提问来源于stack exchange，提问作者crazyfrog