我是反应初学者。我正在尝试设置路由器和渲染来更改页面，但它给了我我无法理解的错误。
我已经安装到npm install react-router-dom
我的终端index.js我已经导入BrowserRouter并嵌入了我的应用程序
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom"
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
在我的文件中，app.js我有从 导入路由开关react-router-dom。
import Home from './page/home';
import Authentication from "./page/authentication";
import Header from './componenti/header';
import './App.css';
import DashboardComponent from './page/dashboardComponent';
import {Route, Switch} from "react-router-dom"
function App(props) {
return (
<div>
<Header/>
<Switch>
<Route …大约 15 天前我开始学习 React。以下代码正确添加帖子，但不重定向到“/”。我正在使用react-router-dom v6。
render(){
return <div>
<Routes>
<Route exact path="/" element={
<div>
<Title title={'Arijit - Photowall'}/>
<Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} />
</div>
} >
</Route>
<Route path="/addPhotos" element={
<AddPhoto onAddPhoto={(addedPost)=>{
this.addPhoto(addedPost)
}}
>
<Navigate to="/" />
</AddPhoto>
}/>
</Routes>
</div>
}
建议使用哪种方式使用 RTK 查询按顺序执行多个突变？
const [
updateProfile,
] = useUpdateProfileMutation();
const [
updatePost,
] = useUpdatePostMutation();
const performMutipleMuations = async () => {
const data= await updateProfile(newData);
await updatePost(data);
};
你好，我正在寻找答案 uselocation 挂钩的意义是什么。我正在构建我的第一个 React 项目。我可以轻松到达全球位置对象并且工作正常。如果我使用这个钩子我能得到什么样的好处？
谢谢。
我有一个关于 React 渲染行为的问题。如果我错了，请纠正我，我是 React 和 Web 开发的新手。
据我所知，React SPA 的默认渲染发生在客户端，对吧？
所以这意味着 src 目录中的整个 JSX 代码将在第一次访问页面时下载（参见 Chrome WebDeveloper Tools Source 选项卡的图片），对吗？
假设我将开发一个管理区域，只有授权用户才能访问，例如通过 JWT，JS 代码仍然包含有关管理区域的信息，即使没有渲染，具有相应知识的人也可以访问该管理区域因为有关管理区域的所有信息都已下载到客户端计算机，对吗？
当然，我可以通过 api 和 JWT 令牌保护敏感数据，但是如果我不想让客户端知道管理区域内容怎么办？对于某种这种情况，是否有最佳实践，例如客户端（默认用户内容）和服务器端（管理区域内容）渲染的混合？最好的方法是什么？客户端/服务器端渲染的优点和缺点是什么？
谢谢&&请友善，正如已经提到的，我了解 React 和 WebDev &&抱歉我的英语，我会努力不断改进它。
我有一个非常简单明了的 ComponentX，它可以呈现一些样式化的 HTML，不需要数据获取，甚至不需要路由。它有一个简单的故事。ComponentX 旨在用于深色主题的网站，因此它假设它将继承color: white;和其他此类样式。这对于正确渲染 ComponentX 至关重要。我不会用 ComponentX 的代码让您感到厌烦。
这些上下文样式（例如background-color: black;和）由组件color: white;应用于。使用 css-in-js 库将样式应用到文档。<body>GlobalStylesGlobalStylesEmotion
import { Global } from '@emotion/react';
export const GlobalStyles = () => (
<>
<Global styles={{ body: { backgroundColor: 'black' } }} />
<Outlet />
</>
);
正如您所看到的，该组件不接受子组件，而是用作布局路由，因此它呈现一个<Outlet />. 我希望应用程序使用由以下所示的布局路线来呈现如下所示的路线树(1)
<Router>
<Routes>
<Route element={<GlobalStyles/>} > <== (1)
<Route path="login">
<Route index element={<Login />} />
<Route path="multifactor" element={<Mfa />} />
</Route>
未图示：<Login>和 …
let [_value, setValue] = useState([1, 2, 3, 4, 5, 1, 2, 3, 4, 5 ]);
在此代码中，如果我想更改 _value[3] 如何使用 setValue 更改值？
在我的项目中，当单击（评级）按钮时，我必须更改 _value[index]。
所以我必须动态更改 _value[index]。
如果您知道答案，请告诉我。谢谢你！
在 redux 教程中，我们学习了如何执行乐观更新：
第 8 部分-rtk-query-advanced#implementing-optimistic-updates
但在updateQueryData的 API 参考中，我发现args必须传入 an ：
const updateQueryData = (
endpointName: string,
args: any,
updateRecipe: (draft: Draft<CachedState>) => void
) => ThunkAction<PatchCollection, PartialState, any, AnyAction>;
所以，如果我们的帖子有分页，
getPosts: builder.query({
query: (current: number) => `/posts?current=${current}`,
providesTags: ['Post']
}),
这个时候我们如何进行乐观更新呢？
// Is there a way to update all getPosts caches?
// Am I missing some documents?
apiSlice.util.updateQueryData('getPosts', ???, (draft) => {
const post = draft.find((post) => post.id === postId)
if (post) {
post.reactions[reaction]++
}
})
以下React路由代码可能在React Router v5中工作，但在React Router v6中给出以下错误
错误：[Player] 不是组件
<Route>。的所有子组件<Routes>必须是<Route>或<React.Fragment>
是否可以更新路由/路由代码，以便它在 React Router v6 中工作？
function App() {
// Some stuff here...
const { players, offlinePlayers } = usePlayers();
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/players">
{players.map((player) => {
return (
<Route exact key={player.name} path={`/players/${player.name}`}>
<Player player={player} />
</Route>
);
})}
</Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
)
}
我有以下组件作为主要布局。当我单击菜单项时，我希望它们导航到主页、假日日历和活动页面。我可以用这个水平菜单做什么？下面的代码显示了围绕上述页面的主要布局。我正在使用 AntD 和反应路由器。这个主要布局围绕着所有其他路由器。
import { Layout, Menu, Button, Avatar, Row, Col, Space, Dropdown } from "antd";
import React, { useState } from "react";
import { Outlet } from "react-router-dom";
const navigation = [
{ label: "Home", key: 1 },
{ label: "Holiday Calendar", key: 2 },
{ label: "Event", key: 3 },
];
const MainLayout = () => {
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
window.dispatchEvent(new …reactjs ×8
javascript ×5
react-router ×5
react-hooks ×2
rtk-query ×2
antd ×1
jwt ×1
redux ×1
storybook ×1