我使用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
似乎也没有任何作用。
1条答案
按热度按时间pdkcd3nj1#
如果您希望每个路由Map到不同的组件(没有布局嵌套),则不需要将它们都包含在单个
<Route>
元素下。或者,仅指定子布线上的元素。