react-router-dom的问题
react-router-dom是一个React Router库的DOM版本。它是用于构建单页应用程序的React组件，实现了客户端路由功能。React Router是一个功能强大的库，用于处理React应用程序中的路由和导航。
概念：
react-router-dom是基于React Router库的DOM版本。它提供了一些特定于Web的组件，如BrowserRouter、Route、Link等，用于在Web应用中进行路由导航。它允许您在React应用程序中使用路由，并根据URL的变化渲染不同的组件。
分类： react-router-dom可以被归类为前端开发、路由管理。
优势：
- 简单易用：react-router-dom提供了简单的API和组件，方便开发人员在React应用程序中添加路由功能。
- 声明式路由配置：通过使用React组件来定义路由，开发人员可以在应用程序中声明性地配置路由映射关系。
- 嵌套路由支持：react-router-dom支持嵌套路由，使得构建复杂的路由结构变得简单和直观。
- 动态路由：react-router-dom允许通过动态路径参数匹配来处理不同的路由情况，使得处理动态数据变得容易。
应用场景： react-router-dom适用于任何需要在React应用程序中实现路由导航的场景，包括但不限于：
- 单页应用（SPA）：react-router-dom可以帮助构建单页应用程序，使得用户在应用程序中导航时无需重新加载整个页面。
- 多视图应用：如果您的应用程序需要在同一个页面上切换不同的视图，react-router-dom可以很好地处理这种情况。
- 路由守卫：通过使用react-router-dom提供的组件，可以轻松实现对特定路由的访问权限控制，例如用户登录检查、角色验证等。
推荐的腾讯云相关产品： 腾讯云提供了一系列与Web开发和云计算相关的产品，以下是一些相关产品的介绍和链接地址：
- 腾讯云服务器（CVM）：可弹性伸缩的云服务器实例，用于托管和运行Web应用程序。产品介绍链接
- 腾讯云云数据库MySQL版：稳定可靠的云数据库服务，适用于存储和管理应用程序的数据。产品介绍链接
- 腾讯云对象存储（COS）：用于存储和托管Web应用程序中的静态资源和文件。产品介绍链接
请注意，以上推荐的腾讯云产品仅为举例，您可以根据具体需求选择适合的产品。
相关·内容
我对这两个包裹感到困惑。我正在做一个新的打字稿项目。
问题是，在我以前的项目中，为了支持类型，我安装了react-router-dom和@types/react-router-dom。
但是现在当react-router-dom v6出来的时候。
@types/react-router-dom包似乎不再更新。我还需要安装这个吗？没有它还行吗？
浏览 3提问于2022-07-14得票数 0
我是新的反应，有一些问题的建立和上传项目。
如果我上传时没有添加react-router-dom，它可以正常工作，但当我在导入react-router-dom之后从build文件夹上传文件时，会出现空白页面，但控制台中没有任何错误。从开发人员工具的源代码选项卡中可以看到文件和代码。
注意:如果没有react-router-dom，所有的html都会在浏览器中呈现。此外，我还添加了/folder-name/static....(用于块和清单)
这是导入react-router-dom的代码
import { BrowserRouter as Router, Route, Switch } fro
浏览 19提问于2019-07-25得票数 0
tl;dr:下面的代码不适用于5.2.0版本的react-router-dom，而是在4.3.1上工作。
上下文:我正在修改一些在线客户端路由代码，使用，特别是利用react-router-dom模块。下面是应用程序的一些相关片段：
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Link, BrowserRouter } from "react-router-dom";
import StyledMenuItem from "
浏览 1提问于2020-07-21得票数 0
回答已采纳
我正在尝试从‘react- useHistory -dom’导入路由器，但是，我得到这个错误:导入错误：'useHistory‘不是从'react-router-dom’导出的。
我也检查了其他答案，比如 this，但都没有用。我的package.json看起来像这样
我就是这样使用useHistory的，
import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router
浏览 81提问于2021-09-19得票数 4
3回答
我刚刚安装了react-router-dom，现在我正在尝试写这一行。
import {BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom';
成功地导入了BrowserRouter和Link。但是，我在导入Switch和Route时遇到了问题。这些不是进口的。FYI，我已经安装了react-router-dom的最新版本，即5.2.0。我在WebStorm遇到了这个问题。在VS代码中，它可以很好地工作。
浏览 4提问于2020-06-14得票数 1
React version:
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router-dom": "5.0.1",
"react-scripts": "3.4.0", js代码为 import {useLocation} from "react-router-dom";
const location = useLocation(); .问题出在哪里？
浏览 49提问于2021-10-15得票数 0
回答已采纳
1回答
我试图在我的rollup.config.js中添加样式组件作为下面的复制，但是它会引发一个错误。我对react-router-dom也有类似的问题，并通过将react-router-dom重命名为rollup.config.js外部的react-router-dom/Link来解决它。
如何处理styled-components？
复制：
// rollup.config.js
export default {
...
external: ['react', 'react-router-dom/Link', 'styled-components&
浏览 0提问于2017-06-18得票数 4
我将react-router和react-router-dom从v4升级到了6.0.0-beta.0，从那时起我就收到了这个错误。我没有在应用程序的任何地方使用match.path。
dependencies {
"@types/react-router": "^4.0.28",
"@types/react-router-dom": "^4.2.7",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0
浏览 11提问于2021-04-14得票数 0
我尝试的是使用useHistory和useLocation为React组件编写一个测试，如下所示：
import { useHistory, useLocation } from 'react-router-dom';
export function MyComponent() {
let location = useLocation();
let history = useHistory();
function changeUrl(param) {
// some logic here
if(foo) {
history.pus
浏览 7提问于2021-11-21得票数 0
回答已采纳
我试图在我的一个测试用例中模拟react-router-dom，以便useHistory钩子在我的测试中发挥作用。我决定使用jest.mock来模拟整个模块，使用jest.requireActual来保存我可能不想模仿的其他属性。
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: '/list',
},
浏览 2提问于2020-07-07得票数 23
回答已采纳
我想在我的应用程序中使用react- router -dom中的3个东西来实现路由器，即路由、useNavigate和Redirect。但问题是路由和useNavigate在react-router-dom 5.2.0中不可用。因此，为了使用路由和useNavigate，我安装了react-router-dom v6.0.0-alpha.1。但问题是Redirect从react-router-dom v6.0.0-alpha.1中删除了。现在我不明白如何在特定的react-router-dom下使用路由、useNavigate和Redirect
import React, { lazy, Su
浏览 0提问于2021-01-26得票数 1
我要创建一个应用程序，利用反应-路由器-多姆。我目前正在尝试我们的外翻5.2.0。我试图孤立这个问题，并集中精力使路由工作，但尚未成功。我用npx创建反应应用程序制作了这个应用程序。
Package.json
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react&#
浏览 8提问于2022-05-12得票数 3
正在做什么 yarn add react-router-dom 失败。应用程序在启动时会抛出一个错误，Intellij会将react-router-dom的导入标记为错误。但是在做 yarn add @types/react-router-dom 很管用。 不过，我找到的所有示例都显示了第一个yarn add...命令。这是react-router-dom的新功能吗？ 我正在使用typescript，如果这有什么不同的话。 ===Edit=== 以下是错误消息。这就是我找到解决方案的地方。 /home/dean/src/react/projects/room-reservations-ui_
浏览 198提问于2021-09-01得票数 1
回答已采纳
嗨，伙计们，我刚开始研究React时遇到了这个问题，这是我的Navbar组件：
import { BrowserRouter as NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<NavLink as={NavLink} exact to="/">
Hello
</NavLink>
</>
浏览 15提问于2022-04-22得票数 2
回答已采纳
大家好！我正在使用REACT编写一个应用程序，当我试图使用导入{ BrowserRouter、路由、链路}时，我将使用“router”；
我得到了以下错误：
无法找到模块“react router”的声明文件。'c:/Users/paula/first-app/node_modules/react-router-dom/index.js‘隐式地具有“任意”类型。如果npm install @types/react-router-dom存在，可以尝试使用它，或者添加一个包含declare module 'react-router-dom';ts的新声明(.d.ts)文件(
浏览 5提问于2020-07-07得票数 2
回答已采纳
由于某种原因，我得到了一个“模块找不到:无法解决'react-router-dom'”错误。我试图安装和卸载它，但它没有解决这个问题。"rm -rf node_modules“和"npm i react-router-dom”不起作用。 import React from 'react';
import './App.css';
import REDBAR from './linije/crvena';
import WHITEBAR from './linije/bijela';
import
浏览 191提问于2020-06-24得票数 0
回答已采纳
1回答
问题
我读过
我想测试react-router-dom，我不关心它是如何工作的，我只需要确保库在我的项目样板中工作。
再生产
我正在测试这个组件
<Link to="/toto">
toto
</Link>
这就是测试
it('it expands when the button is clicked', () => {
const renderedComponent = mount(<Wrapper>
<MemoryRouter initialEntries={
浏览 0提问于2018-03-15得票数 3
好吧，我正在用react路由器做一个简单的导航栏，我已经阅读了其他关于这个问题的帖子，但似乎没有一个能解决这个问题
mport React, { Component } from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter } from "react-router-dom";
import Route from "react-router-dom/Route";
import Home from "./compone
浏览 0提问于2018-10-17得票数 0
我对react-router-dom v6的路由有问题。我的代码如下：
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Routes, Link } from "react-router-dom";
function App() {
return (
//BEM
<Router>
<div cla
浏览 5提问于2022-02-02得票数 2
我在docker容器中运行REST API。我正在构建页面，当我启动服务器时，我得到：
Starting the development server...
Failed to compile.
./src/App.js
Module not found: Can't resolve 'react-router-dom' in '/usr/src/app/src'
当我刷新浏览器时，我看到下面的错误Error: Cannot find module 'react-router-dom'，我已经尝试了所有我能找到的npm安装，因为这似乎
浏览 3提问于2020-04-08得票数 2
当试图从useNavigate导入react-router-dom时，我得到以下错误：
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
我的导入语句：
import { useNavigate } from 'react-router-dom';
浏览 3提问于2020-10-06得票数 12
回答已采纳
1回答
我试着这样模拟react-router-dom。 jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => ({
pathname: '/random/path',
}),
})) 这一切都很好，但是我想更改不同测试的路径名，这样我就可以测试不同的功能，所以我想我应该构建一个函数 const mockReactRouterDom = path =>
浏览 19提问于2020-10-22得票数 0
1回答
嗨，我现在和react-router-dom一起工作。我似乎没有正确地遵守指示，因为我遇到了以下问题：
bundle.js:1085 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
in Router
bundle.js:2279 Uncaught Error: A <Router> may have only one child element
at invariant (bundle.js:2
浏览 1提问于2017-06-15得票数 0
在终端中运行npm run start时，我会收到以下错误。
尝试导入错误：“重定向”不是从“react router”导出的。
我重新安装了node_modules，react-router-dom，react-router。也重新启动终端和我的电脑，但问题仍然存在。
我的代码：
import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { RouteWithLayout } from './components';
i
浏览 29提问于2020-09-01得票数 189
回答已采纳
我正在尝试使用react-router-dom实现一个返回按钮。按钮工作得很好，但我的问题是根据最后访问的页面更改其标签。此按钮将仅出现在可从两个不同页面访问的一个特定组件中。
import { useHistory } from "react-router-dom";
export const GoBack = ({ label }) => {
const history = useHistory();
return (
<div>
<button onClick={() => history.goBack()}&g
浏览 4提问于2020-01-07得票数 1
我使用样式组件来设计我的链接。有时，我还需要使用来自react-router-dom的react-router-dom组件。
import { Link } from 'react-router-dom';
import { Anchor } from './src';
export const StyledLink = Anchor.withComponent(Link);
但是，上面的代码会在控制台中产生以下警告：
警告:接收非布尔属性true unstyled。
如果要将其写入DOM，则传递一个字符串: unstyled="true“或unst
浏览 0提问于2018-10-16得票数 2
回答已采纳
嗨，我目前正在将react-router-dom从5.2.0升级到6.3.0，以便我的react应用程序。在转换应用程序时，我得到了这个错误Module '"react-router-dom"' has no exported member 'match'.
在这里，您可以找到以下代码。
import { match } from 'react-router-dom';
export interface ContentTypeIdParams {
contentTypeId: string;
}
export interf
浏览 10提问于2022-06-27得票数 2
在package.json文件中添加了react-router-dom依赖项。由BrowswerRouter封装的应用程序组件，但当我通过交换机包装路由时，它显示以下错误开关‘不是从'react-router-dom’导出的。我删除了package.json.lock，node模块，重新安装了npm，npm install @babel/core --save。还是不能工作。我成功地为此浪费了6个小时。你能帮我解决这个问题吗？为什么它不导入？ Index.js import {BrowserRouter} from 'react-router-dom';
React
浏览 20提问于2021-11-04得票数 24
回答已采纳
3回答
我正在尝试在我的react应用程序中使用react-router-dom，而且我也在使用typescript而不是javascript。这里的问题是，我不能在我的组件中导入Route并使其工作。我已经安装了@types/react-router-dom，但是由于某些原因，它仍然没有像预期的那样工作。
这是一个试图使用react-router-dom的组件
import {BrowserRouter as Router, Route} from "react-router-dom";
const App = () => {
return (
<
浏览 22提问于2021-11-06得票数 44
回答已采纳
我在VSonline终端导入了“react-router-dom”，并尝试使用它来制作SPA web应用程序。但是，当我尝试在终端中使用'npm start‘呈现它时，出现了这个错误。 ? 由于某些原因，我不得不使用visual studio online，并且需要使用react-router-dom。如果有人能提供这个问题的解决方案，它将对编程初学者有很大帮助:( ..
浏览 7提问于2019-12-07得票数 0
2回答
我将通过以下方式导入路由 import {Routes, Route, BrowserRouter} from 'react-router-dom' 我的包JSON是"react-router-dom": "^6.0.2", ? 我正在使用Pycharm。 npm list react-router-dom返回-- react-router-dom@6.0.2 为什么会发生这种情况？我的前端是空白的。
浏览 213提问于2021-11-19得票数 8
我有以下堆栈：
react@16.13.1
react-dom@16.13.1
react-redux@7.2.0
react-router-dom@5.2.0
我遵循了中提出的关于如何键入-检查使用withRouter创建的临时组件的方法，它运行良好。例如，下列构成部分的类型：
import React from "react";
import { withRouter } from "react-router-dom";
import { RouteComponentProps } from "react-router-dom";
type
浏览 6提问于2020-07-10得票数 1
回答已采纳
3回答
使用react-router-dom，如何检测用户何时导航到新页面？
我目前正在使用"react-router-dom": "^4.2.2"和"react": "^15.6.1"。当用户选择了一个新的目标URL时，我想关闭我的移动导航菜单，但是我在检测路由更改时遇到了问题。
是否有一个回调我可以连接到react-router-dom？我希望能够按照location.onChange(() => { this.state.collapsed = true; })的方式调用代码
我的当前代码如下：
组件：
class Leftn
浏览 1提问于2017-09-15得票数 7
回答已采纳
我的路由路径位于分隔的文件中，该文件只包含路由，仅此而已，这是我在其中导入的唯一文件，React-router-dom。问题是，我想在另一个js文件中指定一个按钮，它将执行goBack()函数，但我不想在这里导入react-router-dom，而是从主js文件继承react-router-dom。因此，我在我的App.js中添加了这一行(这是只有路由的主文件)
constructor(props) {
super(props);
this.goBack=this.goBack.bind(this);
}
goBack(){
t
浏览 0提问于2018-05-08得票数 0
回答已采纳
我有一个使用useHistory钩子的组件。
在编写单元测试时，我模拟了react-route-dom模块，以便在要测试的组件中正确模拟useHistory钩子。
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
location: {
pathname: 'home',
},
}),
}));
但是，在其中一个测试(名为testB)中，我希
浏览 1提问于2020-06-03得票数 1
设置
我们有一个单峰，最近我们决定从纱线转移到pnpm。
节点版本: 14.20.0
pnpm版本: 7.9.5
打字本版本: 4.4.2
迁移到pnpm之后，我更新了VSCode中的包管理器设置，如下所示：
问题
(下面描述的问题发生在超过1个应用程序中，但为了简单起见，我将集中讨论一个应用程序)
在monorepo的一个应用程序中，我们使用的是TypeScript。
问题是VSCode似乎没有读取嵌套依赖项的类型.。
示例
应用程序的依赖项(在其package.json中指定)之一是react-router-dom，react-router-dom将react-router作为
浏览 11提问于2022-08-26得票数 0
回答已采纳
每当单击“发送问题”按钮时，我都会尝试导航到另一个组件。
这是我的尝试：
<p>
{(this.state.hide) && (
<button
style={{ background: "green", color: "white" }}
onClick={()=> {this.props.history.replace('/questions')}}
>
Send Question
</button>
)}
<
浏览 3提问于2018-04-15得票数 1
我正在尝试部署到firebase，但是当我"firebase deploy“时，我仍然会得到以下错误：
=== Deploying to 'korchiedotcom'...
i deploying functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run build
> build
> tsc
../node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module &
浏览 42提问于2022-10-22得票数 0
我尝试在我的App.js中使用这个App.js，它给了我下面的错误，因为很久以来，无法解决这个问题，请帮我解决这个问题，我已经安装了react router@5，这是我的App.js代码
import react from 'react'
import Homepage from "./Pages/Homepage"
import ChatPage from "./Pages/ChatPage"
import { Route } from 'react-router-dom';
import { BrowserRouter } f
浏览 1提问于2022-03-11得票数 0
回答已采纳
4回答
"react-router-dom": "^6.0.0-alpha.5",
我几乎什么都试过了。
我只想从navigate()钩子中模拟这个useNavigate()调用。就这样。很简单。什么都没用。
不，我不想使用Link**. useNavigate在其他地方也是以编程方式使用的，我也想模仿它们**
import React from 'react'
import { useNavigate } from "react-router-dom"
export const Detail = () => {
cons
浏览 6提问于2021-02-19得票数 20
回答已采纳
我遇到了反应路由器的问题。开关现在被路由所取代。但是，我在浏览器中得到了一个空白屏幕。没有错误，只有一个空白的屏幕。我将非常感谢你的解释。
App.js
import React from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter as Router} from 'react-router-dom';
import { Routes ,Route } from 'react-router-dom';
import './
浏览 4提问于2022-08-04得票数 0
我想把下面的代码转换成react-router-dom版本的6.0。它给出了以下error:createBrowserRouter' (imported as 'createBrowserRouter') was not found in 'react-router-dom' (possible exports:
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import routesConfig from "./routesConf
浏览 5提问于2022-09-21得票数 0
回答已采纳
我在使用react-router-dom更改react中的页面时遇到问题。这是我的路由器： import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from '../pages/grocery';
import Profile from '../pages/profile';
import CheckoutPage from '../pages/checkout';
export default function Route
浏览 11提问于2020-06-09得票数 2
2回答
在我看来，这样做更好，更有表现力：
import stuff from 'library/stuff'
所以我不是导入整个库，而是导入应该更快的模块。
但是，例如，当我用react-router-dom做这件事时，我会收到警告，说我应该这样做：
import {Link } from 'react-router-dom'
否则我会收到警告的
Warning: Please use `require("react-router-dom").Link` instead of `require("react-router-dom/Link
浏览 1提问于2020-08-05得票数 2
回答已采纳
3回答
我在控制台中得到了这条消息，我尝试在元素上添加index属性，但没有呈现该元素。问题在journalRoutes中，但我看不出问题所在。
JournalRoutes.jsx：
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { JournalPage } from '../pages/JournalPage'
export const JournalRoutes = () => {
return (
<Rou
浏览 3提问于2022-07-22得票数 1
我正在尝试从react-router-dom实现react-router-dom钩子，但它似乎不起作用。抛出无效钩子调用
App.js
import React, { Component } from 'react';
<...>
import { Signup } from './Signup.js';
import { Login } from './Login.js';
import { Account } from './Account.js';
import { AuthProvider } from
浏览 5提问于2021-01-01得票数 4
3回答
问题：
‘开关’没有被定义为react/jsx undef。
我试图导入开关模块，但它也不起作用。开关导入语句
import { Router, Route, Switch } from 'react-router-dom';
导入开关不起作用。
import './App.css';
import Checkout from './Checkout';
import Header from './Header';
import Home from './Home';
import { Router, Route
浏览 13提问于2021-12-28得票数 4
我正在使用react和react-router-dom。我希望传递react-router-dom的'Link‘中的属性是一个数组 <Link to={{pathname: `/{myURL}`, state: myArray}}></Link> 这是我接收属性的代码 const location = useLocation<Location>()
const test = location.state 当我测试(console.log)时，结果是正确的。但是当我使用.map显示数组时 {test && test.map(t =&
浏览 10提问于2021-04-09得票数 0
回答已采纳
--更新:当我刚刚停止开发服务器，退出VSCode并重新启动它时，它开始工作。不知道是什么原因造成的。
忙于学习React并遇到了这个错误。我已经尝试了其他几个SO帖子，但似乎无法得到我的问题的答案。
我遵循了只使用react-router-dom的指导，并从react-router-dom导入BrowserRouter和路由。但是我得到了一个错误：
./src/App.js
Attempted import error: 'Route' is not exported from 'react-router-dom'.
不确定我做错了什么？
这是我的App.js
浏览 117提问于2019-03-25得票数 15
回答已采纳
我试图弄清楚webpack2.x和react-router-dom的代码拆分是如何工作的。
"react-router-dom": "^4.0.0"
但我读了文档，没有找到这样使用的方法：
getComponent还能不能用？
我发现react-router-dom文档只给了你一些例子，没有解释。
我看到react-router是v4.0.0-beta.8，也许我以后应该用react-router-dom？
module.exports = {
path: 'home',
getComponent(nextState, cb) {
浏览 12提问于2017-03-14得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
