React Router v6 не отображает / синхронизирует c указанный c маршрут с URL-адресом браузера

Question

У меня есть несколько маршрутов, которые я настроил следующим образом:

<Router>
  <Routes>
    <Route path="/" element={<Home />} />

    <Route path="/about" element={<About />} />

    <Route path="/contact" element={<Contact />} />
  </Routes>
</Router>

Проблема в том, что когда я открываю /, go до /about, а затем go до /contact; URL становится /about/contact, а не /contact, кроме того, страница не отображается. Как это исправить, я использую релиз 6.0.0-Alpha-3 . Я прочитал документацию к этой версии и знаю, что sla sh /contact указывает абсолютный путь, а не относительный contact.

Ссылки:

import { Link } from 'react-router-dom';

const ListItemLink = (props) => {
    // React Router link
    return <ListItem button component={Link} {...props} />;
};

// Material UI components
<ListItemLink href="/about">
    <ListItemText primary="Home" />
</ListItemLink>

<ListItemLink href="/contact">
    <ListItemText primary="Home" />
</ListItemLink>

Answer 1

Вы должны использовать вместо href prop.

Вот пример https://github.com/smkamranqadri/react-router-v6-test