小编Dre*_*ese的帖子

我将应用程序Material-UI从版本 4 更新到版本 5，但 RTL 支持不再起作用。

我查看了文档并按照每个步骤进行操作：

https://mui.com/guides/right-to-left/

实际结果是应用程序仍然是 LTR（您可以查看TextField下面 Codesandbox 链接中的组件）。

预期结果是应用程序应该是 RTL。

尽管如此，RTL 支持仍然不起作用。

此外，我在以下位置创建了一个示例版本Codesandbox：

https://codesandbox.io/s/issue-with-rtl-in-material-ui-v5-jtii6?file=/src/index.js

我将感谢您帮助找出问题所在。

谢谢。

我正在研究一个简单的服务器端渲染（SSR）场景：只是一个登录页面，其中包含用户名和密码的文本输入。

与 SSR 一样，当客户端首次加载页面时，他们会获得服务器渲染的版本，该版本未经过水化。看起来不错，并且可以单击文本框并输入内容。

希望 JS 能够快速加载，并且在用户在框中输入任何内容之前就发生水合作用，并且一切正常。

但是，如果用户的网络速度很慢并且 JS 需要几秒钟才能加载怎么办？然后会发生以下情况：

1. 用户在框中输入一些字符
2. JS 突然加载，React 控制了输入框，并清除了它，因为初始状态是一个空字符串（！）
3. 用户感到困惑，必须重新输入。

一定有一个最佳实践，对吗？我尝试过一些事情，例如测试 iftypeof window === "undefined"并将输入设置为disabledif so，但没有什么是令人满意的。我认为最好的用户体验是让水合组件拾取已键入的字符，但我也可以禁用编辑，直到水合完成。

FWIW 我正在使用 Material UI，它会带来一些额外的样式问题，但除此之外，我认为这个问题适用于任何 SSR 文本输入场景。

我试图在我的 Header 组件中的搜索输入上使用 ref ，它不是我的 ResultsList 组件的高阶组件。我想将焦点集中在 ResultsList 组件的标题搜索输入上。从标题来看它很直观，因为我所要做的就是下面的内容。如果我想在 ResultsList 中创建一个专注于 Header 中的输入元素的按钮该怎么办？我如何通过这个参考？我已经阅读过有关forwardRef的内容，但我没有将我的参考转发。ResultsList 不是 Header 的子项。

import React, { useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';

const Header = () => {
  const searchInput = useRef(null);
  const history = useHistory();

  const [searchValue, setSearchValue] = useState(keyword);

  function handleChange(event) {
    setSearchValue(event.target.value);
  }

  function handleSearch(event) {
    event.preventDefault();
    if(searchValue) {
      history.push(`/search/${searchValue}`);
    } else {
      searchInput.current.focus();
    }
  }

  return (
    <form onSubmit={handleSearch} role="search">
      <input
        value={searchValue}
        onChange={handleChange}
        className="HeaderSearch__input"
        id="header-search-input"
        placeholder="Search a repository" …

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

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

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 v5 中，为了指定 useParams 的结果类型，我使用了：

const { param1, param2 } = useParams<{ param1: string, param2: string }>();

如何使用 React Router v6 做到这一点？

我不知道如何输入超过 1 个参数（例如：）useParams<"param1">()，也不知道如何输入参数 asstring和 not string | undefined（参见问题）。

我正在尝试升级到 React router dom v6。该应用程序可以工作，但我似乎无法让测试用例工作。

在我们有了这个笑话包装之前：

const render = (ui: React.FC, path: string, route: string): RenderResult => {
    const history = createMemoryHistory({ initialEntries: [route] });
    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                retry: false,
            },
        },
    });

    return {
        ...render(
            <QueryClientProvider client={queryClient}>
                <Router history={history}>
                    <Route path={path} component={ui} />
                </Router>
            </QueryClientProvider>,
        ),
    };
};

按照 v6 的文档进行操作后，我让应用程序正常工作，并将 jest 的包装器更新为以下解决方案：

return {
        ...render(
            <QueryClientProvider client={queryClient}>
                <Router location={history.location} navigator={history}>
                    <Routes>
                        <Route path={path} element={ui} />
                    </Routes>
                </Router>
            </QueryClientProvider>,
        ),
    };

这会导致以下错误：

警告：函数作为 …

我想知道如何在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 的初学者，并使用 create-react-app 生成了基本源。

当我尝试根据教程设置路由器时，出现类型错误。我试图减少任何可能导致问题的多余代码，直到我最终得到这个

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Router } from 'react-router';

ReactDOM.render(
  <Router>
  </Router>,
  document.getElementById('root')
);

但我仍然遇到同样的错误

    ERROR in ./node_modules/history/index.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    TypeError: /Users/Nanashi/reactjs/learning-my-blog/node_modules/history/index.js: Cannot read properties of undefined (reading 'originalPositionFor')
        at SourceMapTree.originalPositionFor (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:159:27)
        at trace (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:102:37)
        at EncodedSourceMapImpl.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:347:36)
        at TraceMap.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:430:31)
        at SourceMapTree.traceMappings (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:85:34)
        at remapping (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:258:36)
        at mergeSourceMap (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:30)
        at generateCode (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/generate.js:72:39)
        at run (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/index.js:55:33)
        at run.next (<anonymous>)
     @ ./node_modules/react-router/index.js 12:0-65 96:25-44 …