标签: react-router-dom

在 v5 中，我们可以?为可选参数添加尾随路由，但与 v6 一样，对相同内容的支持已被删除，那么编写以下代码的替代方法是什么？

<Route path="/cart/:id?" component={<CartPage />} />

如何useHistory()正确使用？我无法从一个反应组件过渡到另一个反应组件。根据 React 文档以及 Stack Overflow 上的说明，我无法从 App.js 转换到 MyComponent.js。

例如 - 我正在尝试

/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0

function App()
{
    let history = useHistory ();
    const handleClick = () => {
       history.push ('./pages/MyComponent');
    }    

    return (
       <div className="App">
          <button onClick={handleClick}>Next page ==></button>
       </div>
    );
}

我也测试了这个示例，但是按下按钮时输出会引发以下错误：

类型错误：无法读取未定义的属性“push”

是不是有什么东西泄露给了我，或者 Babel 这边有什么错误？

项目反应结构：

+ Root/
    + src/
        - App.js
        - index.js
        + pages/
            - …

我正在使用反应路由器 v6。我想导航到具有 searchParams 的 URL，但我没有找到开箱即用的方法。useNavigate允许我通过传入字符串来导航到 URL。useSearchParams允许我在当前页面上设置 searchParams。

我可以使用生成 searchParams createSearchParams，然后将其转换为字符串，并将其附加到 URL 的末尾，?中间有一个，但这看起来像是一个 hack。

我希望能够做类似的事情：

const navigate = useNavigate();

// listing?foo=bar
navigate("listing", {
    params: {
        foo: "bar"
    }
});

我的黑客解决方法：

function useNavigateParams() {
    const navigate = useNavigate();

    return (url: string, params: Record<string, string | string[]>) => {
        const searchParams = createSearchParams(params).toString();
        navigate(url + "?" + searchParams);
    };
}

const navigateParams = useNavigateParams();

navigateParams("listing", {
    foo: "bar"
});

我错过了文档中的某些内容吗？

"react-router-dom": "^6.0.0-alpha.5",

我几乎尝试了一切。

我只是想从钩子上模拟这个navigate()调用useNavigate()。就是这样。简单的。没有任何作用。

不，我不想使用Link。useNavigate 也在其他地方以编程方式使用，我也想模拟它们

"react-router-dom": "^6.0.0-alpha.5",

我已经尝试过这些：

jest.mock('react-router-dom', () => {
    // Require the original module to not be mocked...
    const originalModule = jest.requireActual('react-router-dom');

    return {
        __esModule: true,
        ...originalModule,
        // add your noops here
        useNavigate: jest.fn(() => 'bar')
    };
});

import * as ReactRouterDom from "react-router-dom";
...
// cannot redefine property
          Object.defineProperty(ReactRouterDom, 'useNavigate', {
              configurable: true,
              value: jest.fn(() => 'bar')
          });

// doesnt work
          jest.mock('react-router-dom', () => ({
              useNavigate: jest.fn(() => jest.fn), …

我需要在react-router-dom中使用多个嵌套路由

我正在使用react-router-dom的v4

我有我的

import { BrowserRouter as Router, Route } from 'react-router-dom';

我需要像这样渲染组件

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Home组件包含一个Header组件,该组件对于Page1,Page2和Page3组件是通用的,但在Login和About中不存在.

我的js代码就是这样读的

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

我希望Login组件只显示在/ login当我请求/ page1,/ page2,/ page3时,它们应该分别包含Home组件和该页面的内容.

我得到的是渲染的Login组件,并在下面呈现Page1的组件.

我很确定我错过了一些非常微不足道的事情,或者在某个地方犯了一个非常愚蠢的错误,并且非常感谢我能得到的所有帮助.过去两天我一直坚持这个.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//Layouts
import HomeLayoutRoute from "./components/layouts/HomeLayout";

//components
import Home from './components/Home';
//import Dashboard from './components/Dash';

// Routing
import PrivateRoute from "./components/routing/PrivateRoute";

// Screens
import PrivateScreen from "./components/loginscreens/PrivateScreen";
import LoginScreen from "./components/loginscreens/LoginScreen";
import RegisterScreen from "./components/loginscreens/RegisterScreen";
import ForgotPasswordScreen from "./components/loginscreens/ForgotPasswordScreen";
import ResetPasswordScreen from "./components/loginscreens/ResetPasswordScreen";

const App = () => {
  return (
    <BrowserRouter>
      <div className="app">
        <Routes> 
          <HomeLayoutRoute path="/" element={<Home />} />
          <PrivateRoute path="/" element={<PrivateScreen/>} />
          <Route path="/login" element={<LoginScreen/>} />
          <Route path="/register" element={<RegisterScreen/>} />
          <Route …

在react-router v3中我可以访问它props.location.query.foo(如果当前位置是?foo=bar)

在react-router-dom@4.0.0 props.location只有props.location.search一个字符串就像?foo=bar&other=thing.

也许我需要手动解析和解构该字符串以找到foo或的值other.

屏幕截图console.log(this.props): (注意从?artist=band这里我想得到的值是从artist哪个值band)

我正在尝试history.push在新useHistory钩子上模拟react-router并使用@testing-library/react. 我只是像这里的第一个答案一样嘲笑模块：How to test components using new react router hooks?

所以我在做：

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory();
  return (
    <div>
      <button onClick={() => history.push('/help')} />
    </div>
  );
};

export default RouteNotFound;

//NotFound.js
import * as React from 'react';
import { useHistory } from 'react-router-dom';


const RouteNotFound = () => {
  const history = useHistory(); …

我有一个带旋转幻灯片的仪表板,每个幻灯片在Bldgs中都有一个相应的标签.两者Dashboard.js并Bldgs.js有孩子我App.js.

当用户点击特定幻灯片A时Dashboard.js,Dashboard需要告知App.js以便在路由到时App可以告诉显示Bldgs.js标签.ABldgs

我相信,我传递正确的索引值从Dashboard最高App和向下Bldgs.但是,我的App.js文件中引发了一个错误:

Uncaught TypeError: Cannot read property 'push' of undefined

在我开始将handleClick()函数传递给Dashboard组件之前,我的代码工作正常.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter as Router } from …

我正在尝试在`react-router-dom v6.0中组织路由。这是我的流程：

根应用程序组件

function AppComponent() {
  return <AppRoute />;
}

AppRoute.js（基本路由）

const AppRoute = () => {
  return (
    <>
      <GuestRoute path="/login" component={Login} />
    </>
  );
};

访客路线

const GuestRoute = ({ component: Component, ...rest }) => {
  return (
    <GuestLayout>
      <Routes>
        <Route {...rest} element={<Component />} />
      </Routes>
    </GuestLayout>
  );
};

宾客布局

const GuestLayout = ({ children, ...rest }) => {
  return (
        <div>
          {children}
        </div>
  );
};

但是，当我转到 时/login，它并没有破坏页面，但仍然显示 的警告No routes matched location "/login"。我在用react-router-dom …