react-router-dom 6.8.1 and react 18.2.0 <Link> only updated URL

I’m using react-router-dom 6.8.1 and react 18.2.0 and trying to set up browser router using the createBrowserRouter() and createRoutesFromElements() functions. I’m then rendering my browser router using the <RouterProvider> component, and the front page of my website displays fine (the App component does). For some reason, any react-router-dom <Link> components I place in my components appear on the front page, but when I click them, only the URL changes, and it does not update the UI. What’s weird is that if I use an <Outlet>, the UI from the child routes will display when I click any links, but that’s not what I want. I need to navigate to a separate page.

Here’s where I’m creating the browser router:

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} />);

Here’s where I create my <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;

I’m tried rendering the <BrowserRouter> component itself instead of using createRoutesFromElements, but same results. Changing the path from profile to /profile also seems to do nothing.

>Solution :

If you want each route to map to a different component (without layout nesting), there is no need to wrap them all under a single <Route> element.

<>
    <Route path="/" element={<App />} />
    <Route path="/profile" element={<ParticipantProfile />} />
</>

Alternatively, only specify the element on the child route.

<Route path="/">
    <Route path="" element={<App />} />
    <Route path="profile" element={<ParticipantProfile />} />
</Route>