标签: react-router-dom

当我尝试从 react-router-dom 模块导入 useRouteMatch 时出现此错误，出现此错误：

尝试导入错误：“useRouteMatch”未从“react-router-dom”导出。

我有错误版本的 react-router-dom 模块吗？

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    useParams
} from "react-router-dom";

我查看了模块的导出，实际上并没有导出。我有错误的版本吗？

import _BrowserRouter from "./BrowserRouter";
export { _BrowserRouter as BrowserRouter };
import _HashRouter from "./HashRouter";
export { _HashRouter as HashRouter };
import _Link from "./Link";
export { _Link as Link };
import _MemoryRouter from "./MemoryRouter";
export { _MemoryRouter as MemoryRouter };
import _NavLink from "./NavLink";
export { _NavLink as NavLink };
import _Prompt from "./Prompt";
export { _Prompt …

我有一个应用程序，它使用 react-router-config 并使用包装器组件来重定向未经身份验证的用户。

我有一些功能需要使用路由 /tasks/:id 但我无法访问 :id 值来执行必要的任务查找。

我的路线.js：

import React from "react";
...
const Tasks = React.lazy(() => import("./Components/Tasks"));
...
const routes = [
  {
    path: "/tasks/edit/:id",
    name: "View Task",
    component: Tasks
  }
...
];
export default routes;

然后我有AuthenticatedRoute.js：

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default function AuthenticatedRoute({
  component: C,
  appProps,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        appProps.isAuthenticated ? (
          <C {...props} {...appProps} />
        ) : …

我正在努力为这种情况找到合适的类型。这是登录后重定向的简化版本。以下会产生编译器错误：

Property 'from' does not exist on type '{} | { from: { pathname: string; }; }'.

添加修复编译器错误as any的使用，location.state但它很丑陋，并且 linter 会抱怨。

import React from "react";
import { useLocation } from "react-router-dom";

const AuthLayer: React.FC = (props) => {
  const location = useLocation();

  const { from } = location.state || { from: { pathname: "/" } };

  return <p></p>;
};

export default AuthLayer;

我正在开发一个与 Firebase 集成的 React Web 应用程序，并且我正在尝试对我的用户进行身份验证。我已经设置了路线，以便在用户通过身份验证时显示主页组件，否则显示登录页面。但是，当我的应用程序首次加载时，它会显示登录页面，需要一两秒的时间才能识别用户实际上已通过身份验证，然后切换到主页。它看起来很混乱，我猜我没有很好地或足够快地处理 onAuthStateChanged 。在我的 App 组件中，我订阅了一个 ReactObserver，它会在身份验证状态发生更改时发出信号。我该怎么做才能避免这种奇怪的行为？

我的App.js：

import {BrowserRouter, Route} from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import {loggedIn, firebaseObserver} from "../firebase";
import {useEffect, useState} from "react";

export default function App() {
    const [authenticated, setAuthenticated] = useState(loggedIn())

    useEffect(() => {
        firebaseObserver.subscribe('authStateChanged', data => {
            setAuthenticated(data);
        });
        return () => { firebaseObserver.unsubscribe('authStateChanged'); }
    }, []);

   return <BrowserRouter>
             <Route exact path="/" render={() => (authenticated ? <Home/> : <Login/>)} />
          </BrowserRouter>;
}

我的 …

使用“react-router-dom”：“^5.2.0”和“react”：“16.8.6”，

我有这个：

<Switch>
   <Route path="/users" component={Users} />
   <Route path="/users/:id" component={Users} />
</Switch>

并在用户组件中：

const param = useParams();
console.log(param);

因此，如果我输入/users或/users/10始终将参数呈现为空对象。我在这里缺少什么？

我已经安装了react-router-domV6。当我使用 Jest-Enzyme 运行非常基本的测试时，出现上述错误：

expect(shallow(<CustomerListTable customers={mockCustomers} />).length).toEqual(1);

我已经遇到过这里提到的类似问题，但我已经在做提供的答案了。甚至尝试做import { BrowserRouter as Router } from "react-router-dom";. 我在这里缺少什么？

索引.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StrictMode } from "react";
import { BrowserRouter } from "react-router-dom";
...

ReactDOM.render(
  <StrictMode>
          ...
            <BrowserRouter>
              <AuthProvider>
                <App />
              </AuthProvider>
            </BrowserRouter>
          ...
  </StrictMode>,
  document.getElementById("root")
);

应用程序.js

import React from "react";
import { useRoutes } from "react-router-dom";
import Routing from "./routes";
import useAuth from "./hooks/useAuth"; …

我试图在导航到 ReactJS Web 应用程序中的其他路线或页面之前显示未保存更改的对话框。我尝试了 Stackoverflow 的不同解决方案，但没有成功。大多数解决方案与旧版本相关。我需要版本6.0.2 (react-router-dom)。任何能在这方面帮助我的人都非常感激。

使用react-router-dom版本6时出现以下错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\n

据说我的BrowserRouter是问题，这似乎表明 React 和渲染器不匹配。但是，我找不到任何问题。下面是导致错误的代码片段：

import React from 'react';\nimport './App.css';\nimport { BrowserRouter, Route, …

据我现在的理解，如果我们传递一个Outletwith 上下文，上下文之后的 props 可以传递到 child 中，而outlet 充当模板，将这些 props 传递到路由器可能渲染的任何子代中。

我的问题是，如果我们只是<Outlet />在没有上下文的情况下设置怎么办？如果它没有通过任何props，我们有什么理由特别想<Outlet />单独使用呢？

代码可能如下所示

索引.js

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="checkout" element={<Checkout />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

应用程序.js

function App() {
  return (
    <>
      <Reset />
      <GlobalStyle />
      <Header cartItems={cartItems} />
      <Outlet />
    </>
  )
}

我正在使用 React Router v6，以下是我的路线：

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: '/sign-up',
        element: <SignUpPage />,
      },
      {
        path: '/log-in',
        element: <LogInPage />,
      },
    ],
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

该App组件包含我的应用程序的布局并使用该组件输出路线元素Outlet。但是现在，如果有错误冒泡到根路由，那么ErrorPage会按预期显示，但它不会使用...的布局...那么，当显示错误页面时App，如何重用我的布局App？