React router dom V6 重定向到双路径

Question

我在使用 React Router V6 时遇到问题。我没有将 BrowserRouter 添加到 main.tsx 中。

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,

我需要仅在特定位置显示标题。我读到我可以通过在路线元素中提及多个元素来做到这一点。所以我补充道：

            <Route path="invoices-list" element={<InvoicesListPage />} />

            <Route path="invoice-details" element={(
              <>
                <Header />
                <InvoiceDetails />
              </>
            )} />

所以在上面的代码中，我只需要在

invoice-details

路由中渲染 Header 组件。

1. 我尝试从 URL 在页面之间导航，但如果我从标题导航到不同的路线，我的位置只会在现有路线的顶部添加一条路线。 例如，如果我位于

   /profile

   并想要导航到

   invoice-details

   ，则 url 路径转换在

   /profile/invoice-details

   ...

因此，如果我用链接配置标头，路径就会连接起来

<Link to={'signup'}>Inregistreaza-te</Link>
<Link to={'login'}>Login</Link>

Answer 1

因此，如果你使用

to={'signup'}

或

to={'login'}

，React 路由器会假设你想要导航到相对于当前 URL 的路径，这就是为什么当你在

/profile

时，单击

invoice-details

会引导你到

/profile/invoice-details 

.

解决方案是简单地添加

/

使其成为绝对路径，如

<Link to="/login">Signup</Link>

。希望对您有帮助！