我使用react-router-dom 6.8.1和react 18.2.0，尝试使用createBrowserRouter()和createRoutesFromElements()函数设置浏览器路由器，然后使用<RouterProvider>组件渲染浏览器路由器，网站首页显示正常（App组件有）由于某种原因，我放置在我的组件中的任何react-router-dom<Link>组件都会出现在首页上，但当我单击它们时，只有URL发生了变化，而且不更新UI，奇怪的是如果我用<Outlet>，点击任何链接都会显示子路由的UI，但这不是我想要的，我需要导航到一个单独的页面。
下面是我创建浏览器路由器的地方：

import * as ReactDOM from 'react-dom/client';
import {
    createBrowserRouter,
    createRoutesFromElements,
    Route,
    RouterProvider,
} from 'react-router-dom';

import App from './app/app';
import ParticipantProfile from './app/profiles/participantProfile';

const browserRouter = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={<App />}>
            <Route path="profile" element={<ParticipantProfile />} />
        </Route>
    )
);

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router={browserRouter} />);

下面是我创建<Link>的地方：

import { Link } from 'react-router-dom';
import { createTheme } from '@mui/material/styles';

const theme = createTheme();

function App() {
    return <Link to="profile">Profile</Link>;
}

export default App;

我尝试过渲染<BrowserRouter>组件本身而不是使用createRoutesFromElements，但结果相同。将路径从profile更改为/profile似乎也没有任何作用。