英文:
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.
英文:
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.
答案1
得分: 0
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 index element={<App />} />
<Route path="profile" element={<ParticipantProfile />} />
</Route>
英文:
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 index element={<App />} />
<Route path="profile" element={<ParticipantProfile />} />
</Route>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论