react-router-dom 6.8.1 和 react 18.2.0 中的 只更新了 URL。

huangapple go评论62阅读模式
英文:

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 &lt;RouterProvider&gt; component, and the front page of my website displays fine (the App component does). For some reason, any react-router-dom &lt;Link&gt; 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 &lt;Outlet&gt;, 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 &#39;react-dom/client&#39;;
import {
    createBrowserRouter,
    createRoutesFromElements,
    Route,
    RouterProvider,
} from &#39;react-router-dom&#39;;

import App from &#39;./app/app&#39;;
import ParticipantProfile from &#39;./app/profiles/participantProfile&#39;;

const browserRouter = createBrowserRouter(
    createRoutesFromElements(
        &lt;Route path=&quot;/&quot; element={&lt;App /&gt;}&gt;
            &lt;Route path=&quot;profile&quot; element={&lt;ParticipantProfile /&gt;} /&gt;
        &lt;/Route&gt;
    )
);

const root = ReactDOM.createRoot(
    document.getElementById(&#39;root&#39;) as HTMLElement
);

root.render(&lt;RouterProvider router={browserRouter} /&gt;);

Here's where I create my &lt;Link&gt;:

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

const theme = createTheme();

function App() {
    return &lt;Link to=&quot;profile&quot;&gt;Profile&lt;/Link&gt;;
}

export default App;

I'm tried rendering the &lt;BrowserRouter&gt; 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 &lt;Route&gt; element.

&lt;&gt;
  &lt;Route path=&quot;/&quot; element={&lt;App /&gt;} /&gt;
  &lt;Route path=&quot;/profile&quot; element={&lt;ParticipantProfile /&gt;} /&gt;
&lt;/&gt;

Alternatively, only specify the element on the child route.

&lt;Route path=&quot;/&quot;&gt;
  &lt;Route index element={&lt;App /&gt;} /&gt;
  &lt;Route path=&quot;profile&quot; element={&lt;ParticipantProfile /&gt;} /&gt;
&lt;/Route&gt;

huangapple
  • 本文由 发表于 2023年2月19日 09:31:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75497473.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定