小编Dre*_*ese的帖子

在询问之前我进行了很多搜索，但似乎找不到适合我的解决方案。

我有一个函数需要在状态设置为新值后调用。

const onClickCallback = () => {
    setState(..., setCallback())
}

const setCallback = () => {
    console.log(State) // this prints the old State value
    if(State === something){
        ....
    }
}

尽管该函数被作为 setState 回调调用，但它仍然获取旧值。

我不确定问题是出在我这边还是根本不可能..

ReactDOM.render(
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/child">Child</Link>
    </nav>
    <Routes>
      <Route path="/" element={<ParentComponent />} />
      <Route path="child" element={<ChildComponent />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

function ParentComponent() {
  return (
    <div>
      <h1>i am parent component</h1>
      <Outlet />
    </div>
  );
}
function ChildComponent() {
  return (
    <div>
      <h1>i am child component</h1>
    </div>
  );
}

当我访问 /child 路线时，我期待以下输出：
我是父组件
我是子组件

而不是上面我只是得到：
我是子组件

我想知道如何在react-router-dom v6中使用单个容器或布局实现多个路由

到目前为止，这是我的代码：

<Routes>
<Route
        path="/dashboard"
        element={
          <AdminLayout>
            <DashboardScreen />
          </AdminLayout>
        }
      />
      <Route
        path="/guides"
        element={
          <AdminLayout>
            <GuidesScreen />
          </AdminLayout>
        }
      />
      <Route
        path="/post"
        element={
          <AdminLayout>
            <PostScreen />
          </AdminLayout>
        }
      />
</Routes>

但它不起作用，我在这里错过了什么？

谢谢！

代码更新：

<Routes>
    <LoginLayout>
      <Route path="/" element={<SignInForm />} />
      <Route path="/signin" element={<SignInForm />} />
      <Route path="/newpassword" element={<NewPassword />} />
      <Route path="/phoneverification" element={<PhoneVerification />} />
      <Route path="/continuewithphone" element={<ContWithPhone />} />
      <Route path="/resetpassword" element={<ResetPassword />} />
      <Route
        path="/confirm-resetpassword"
        element={<ConfirmResetPassword />}
      />
    </LoginLayout>
  </Routes>
  <Routes>
    <AdminLayout>
      //Routes here
    </AdminLayout>
  </Routes> …

Azure App Insights 建议使用其 SPA 反应插件。https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin

在记录的示例中，他们手动创建浏览器历史记录以传递给扩展程序。

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [reactPlugin],
        extensionConfig: {
          [reactPlugin.identifier]: { history: browserHistory }
        }
    }
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };

但是，我使用的是 React router 6，我认为它会创建自己的浏览器历史记录。该文档确实参考了 React Router 文档，但是，这是针对 React Router 5 的，它确实直接公开了历史记录。

使用 React …

我正在尝试利用 React Router 加载器。实际上，除了一种情况之外，它的效果非常棒。

我用于Auth0 React SDK授权。我传递getAccessTokenSilently给axios interceptor所有 API 调用，标头中都有不记名令牌。在某些路由上，我以这种方式使用 React Router v6.4 中的加载器：

路由器

              {
                path: PATHS.rawMedia,
                element: <RawMediasPage />,
                loader: rawMediasLoader,
              }

在我重新加载页面之前它工作得非常好。页面重新加载加载器在 Auth0 之前发送请求。在这种情况下，加载程序发送没有承载令牌的请求，并且从后端返回错误。

如何解决这个问题？高技能的人暗示我如何解决这个问题，但不幸的是我没那么好。据我了解，我需要在路由中进行<RouterProvider router={router} />更App.tsx深入的处理，以便 Auth0 首先针对令牌触发......但我不明白如何实现它。

AuthProvider.tsx

export const AuthProvider = (): JSX.Element | null => {
  const navigate = useNavigate();
  if (!(domain && clientId)) {
    return null;
  }

  const onRedirectCallback = (appState: any) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain} …

我在我的 React 项目中使用 reselect lib。

我已经创建了Posts工作正常的选择器。这是代码

// selectors.ts

const getPosts = (state: RootState) => state.posts.posts;

export const getPostsSelector = createSelector(getPosts, (posts) => posts);

我在我的页面上这样称呼它

// SomePage.tsx    
const posts = useSelector(getPostsSelector);

现在我需要通过 id 获取帖子。我想这样做：

// selectors.ts

const getPostDetail = (state: RootState) =>
  state.posts.posts.entities[ID];

export const getPostsById = createSelector(
  getPostDetail,
  (detail) => detail
);

并在页面上调用：

const PostDetail = useSelector(getPostsById);

我有两个问题：

• 获得单一职位的正确方法是吗？
• 如果是，如何传递帖子 ID 如果不是，如何正确处理？

我面临使用查询参数和反应路由器 dom 的问题。

当我执行 API 调用并返回状态 200 时，我将用户重定向到带有 History.push 的结果页面。到目前为止一切正常。但是，当我在结果页面上并刷新页面时，我想使用带有查询参数的 url 来执行新搜索，不幸的是 React Router Dom 无法识别该 url 并重定向我。

应用程序.tsx

<PrivateRoute path="/search?value=:searchValue&type=:searchType">
  <Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />

搜索.tsx

history.push({
  pathname: `/search?${formattedSearch
    .map((search) => `value=${search.value}&type=${search.type}`)
    .toString()
    .replace(",", "|")}`,
  state: search
});

这个history.push效果很好，可以将用户重定向到所需的页面。

但是，当我使用相同的 url 刷新页面时，React Router Dom 无法识别该路由，并且不会将我重定向到该组件。

你有什么想法 ？谢谢您并祝您度过愉快的一天。

以前，在react-router-dom v5（或更低版本）中，您可以使用：

<Route path="/" render={() => {doSomething(); return <ComponentName />}} />

既可以触发函数又可以创建路由，而无需在 ComponentName 组件内部创建任何额外的代码。render在 v6 中被替换为，element现在如何实现这一点？

尽管检查了堆栈溢出上已经发布的所有答案，但我找不到适合我的案例的解决方案，所以我将发布它。

我正在使用“react-router (v6)”中的 {Router}以便能够使用自定义历史记录对象在我的 redux 操作中进行导航。

这是我的文件：

索引.tsx

import { Router } from 'react-router';
import myHistory from './utils/history';

ReactDOM.render(
   <Provider store={store}>
      <Router navigator={myHistory} location={myHistory.location}>
         <App />
      </Router>
   </Provider>,
   document.getElementById('root')
);

应用程序.tsx

import MainNavigation from './components/navigations/MainNavigation';
import Routes from './routes/Routes';

const App = () => {
   return (
      <>
         <MainNavigation />
         <Routes />
      </>
   );
};

export default App;

主导航.tsx

import { Link } from 'react-router-dom';

const MainNavigation = () => {
   return (
      <nav className='navigation'>
         <ul>
            <li>
               <Link …

我正在使用带有钩子的react-router v6 useRoutes()（文档）。

我正在尝试添加路线转换react-transition-group。

我尝试了很多不同的东西，但动画并不干净，并且不适用于子路线 - 整个布局动画而不是子路线。

export const App = () => {
  const routes: RouteObject[] = [
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

  const element = useRoutes(routes);
  const location = …