当试图通过react-router-dom获取页面时，为什么会得到404？
当试图通过react-router-dom获取页面时，可能会得到404错误的原因有以下几种可能性：
- 路由配置错误：首先需要检查路由配置是否正确。确保在路由配置文件中正确地定义了所需的路由路径和对应的组件。
- 服务器配置错误：如果使用的是服务器端渲染（Server-side Rendering）或者静态文件服务器，需要确保服务器配置正确。例如，如果使用的是Node.js服务器，需要确保服务器端代码正确处理了路由请求。
- 路径匹配错误：如果使用了动态路由或者参数化路由，需要确保路径匹配正确。例如，如果定义了一个动态路由
/users/:id，则访问/users/123应该能够正确匹配到对应的组件。 - 404页面配置错误：如果以上都没有问题，那么可能是因为没有正确配置404页面。当访问一个不存在的路由时，需要配置一个404页面来处理这种情况。
针对以上可能的原因，可以采取以下措施来解决问题：
- 检查路由配置：仔细检查路由配置文件，确保路径和组件的对应关系正确。
- 检查服务器配置：如果使用了服务器端渲染或者静态文件服务器，确保服务器配置正确，能够正确处理路由请求。
- 检查路径匹配：如果使用了动态路由或者参数化路由，确保路径匹配正确，能够正确匹配到对应的组件。
- 配置404页面：在路由配置中添加一个404页面，用于处理不存在的路由请求。可以创建一个专门的组件来显示404页面，并在路由配置中将其指定为默认路由。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，支持多种操作系统和应用场景。详情请参考：腾讯云云服务器
- 腾讯云云函数（SCF）：无服务器计算服务，支持事件驱动的函数计算模型，可快速构建和部署应用程序。详情请参考：腾讯云云函数
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于各种数据存储和应用场景。详情请参考：腾讯云对象存储
请注意，以上仅为示例产品，实际应根据具体需求选择适合的腾讯云产品。
相关·内容
2回答
如何在React中返回404状态码(使用react-router-dom)？ <Route component={NotFoundPage} path="*" /> 我得到的答案可以返回404页面，但不能返回http状态代码。有什么办法可以解决这个问题吗？
浏览 55提问于2020-07-16得票数 2
回答已采纳
import { Route } from 'react-router-dom'
<PageRoute exact page={GamesPage} path='/games/:type' config={config} />
当我尝试使用带参数的路由在页面上获取图像时，它返回404。但当我试图通过以下方式获取图像时：
<PageRoute exact page={GamesPage} path='/games' config={config} />
它的工作原理正确。我试图查找问题，尝试执行strict模式，
浏览 1提问于2019-03-12得票数 1
回答已采纳
我有ASP.NET的网站，我试图为运行时错误和404错误(页面找不到).i在web.config页面有这个代码的错误页面。
<customErrors mode="On" defaultRedirect="~/Error.aspx">
<error statusCode="404" redirect="~/404.aspx"/>
</customErrors>
当我试图进入一些不存在的页面作为时，我得到了404.aspx页面，但当我进入 (没有.aspx)时，我从浏览器得到默认错误页面。我怎
浏览 2提问于2015-04-16得票数 0
我试图弄清楚为什么下面的页面在手动刷新后会出现404错误(F5)。一开始它可以正常加载，但是如果我只刷新这个页面，它就会转到404。它的主要依赖"Meeting“组件没有这样的问题。它可以很好地刷新。只想让你知道React应用程序是在一个.NET MVC项目中构建的，只有一部分视图是由React处理的。你知道我应该做错什么吗？ #App.tsx
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 're
浏览 12提问于2019-06-27得票数 1
1回答
问题
在下面的代码中，我有一个基本路由器，它有几个路径，以一个catch通配符结束。我所有的路由都在开发中工作，但是当我在远程服务器上托管我的网站时，我的路由将工作，因为我通过链接导航站点，如果我刷新或键入一个子页面的URL，我的路由就会中断。例如，单击指向/about的链接可以正常工作，但如果我通过浏览器导航栏访问www.mywebsite.com/about，则会遇到404错误。
问题为什么通过浏览器链接导航到子页面，或者刷新子页面会导致404错误？
版本
我使用的是React路由器v6.4.4。
import { BrowserRouter, Outlet, Route, Routes
浏览 14提问于2022-12-04得票数 0
1回答
在Nextjs中，我面临路由和链接的问题。我使用React+Typescript创建了一个类似页面的博客，我希望在Nextjs中使用相同的代码。我最初使用的是import {Link} from 'react-router-dom'; .However，因为这个链接不适用于Nextjs，我使用了链接/下一个导入。
问题是，当我试图单击我的Navbar的"Aboutus“时，我会得到以下错误：
无法找到 404此页面。
这是我的Navbar.tsx代码
import React from 'react';
import Link from 'ne
浏览 4提问于2020-02-18得票数 0
回答已采纳
我有两个web应用程序A和B。web应用程序B是角6基。
在web应用程序A中，它得到了一个引用B的链接，查询字符串类似于。
在web应用程序B中，我定义了如下所示的路由。
{ path: 'receipt/:referencenumber/:title/:description', component: ReceiptComponent},
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'home', component: HomeCompon
浏览 4提问于2018-09-22得票数 3
回答已采纳
我试图理解为什么我的404页面不能加载，如果我试图进入公共文件夹。
当我尝试转到assets文件夹时。我得到了这个404页。
浏览 0提问于2016-11-17得票数 1
1回答
我在建立一个404页面。它将在/404上运行，对于任何未知的路由，我都将使用<Navigate path='/404' />。这一切都很好，但我也想显示URL的详细信息，甚至记录错误的链接。为此，我需要访问以前的路由详细信息。 还有一篇类似的文章，但它讨论的是导航历史，而不是显示历史信息。 How to go back to previous route in react-router-dom v6 我尝试了以下几种方法的不同组合，试图从useLocation获取细节并作为状态传递，但它抛出了错误：Error: useLocation() may be used
浏览 130提问于2021-11-19得票数 2
回答已采纳
1回答
我想知道用户是否离开了页面
我试过：
componentWillMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
},
但我明白：
this.props.router未定义
我看到了一些解决办法，但我不想用这种反应方式：
React.createClass
反应路由器的版本：
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2
浏览 1提问于2018-04-18得票数 1
我有一个一个页面反应应用程序，我有一个菜单上的锚链接设置如下：
<a href="/App#story" class="font-medium text-gray-100 hover:text-red-600">Story</a>
在目标区域里，我有这样的想法：
<div id="story" class="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-black overflow-hidden">
当我执行npm start在本地运行页面时，锚链接按预期工作。当
浏览 2提问于2021-10-30得票数 0
我刚开始学习react和读书。但我不知道如何建立应用程序它看起来专业。我读过关于react-router-dom的文章，我可以为不同的路由制作不同的react组件，如下面的代码spinet所示。但这是构建react应用程序的好方法吗？
import React from 'react';
import { Route, Switch } from 'react-router-dom'
import Blog from "./Blog";
import Authentication from './Authentication';
浏览 1提问于2020-08-22得票数 0
1回答
在我的网站上，我希望能够给用户更好的反馈404错误比“页面找不到”。如果视图引发404错误，我希望向描述视图显示内容的模板传递一个额外的参数。例如：
views.py
def get_or_404(model, attribute, value, template, **kwargs):
try:
return session.query(model).filter(attribute == value).one()
except NoResultFound:
abort(404)
@app.errorhandler(404)
def page
浏览 1提问于2014-04-23得票数 2
回答已采纳
2回答
我创建了我的页面路由与反应路由器v5，一切都很好。如果我点击链接，它会带我到页面，但是当我重新加载页面时，我会在页面上得到一个"404 \ page未找到“错误。
import React, { useEffect, useState } from 'react'
import Home from './dexpages/Home'
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import Dashboard from './dexp
浏览 8提问于2022-04-12得票数 1
回答已采纳
1回答
我试图从一个网页上抓取数据，但我得到了一个404错误的网址如下。但是，我需要从浏览器中获取404链接中的数据。示例如下：
library(tidyverse)
library(rvest)
url <- "http://www.uscho.com/scoreboard/division-i-men/20172018/composite-schedule/"
link_list <- url %>%
read_html() %>%
html_nodes("td:nth-child(13) a") %>%
html_at
浏览 3提问于2018-05-28得票数 0
我在ubuntu服务器上部署了一个应用程序。我运行了/etc/nginx/sites-available/default，并在/var/www/html中复制了构建的所有内容--文件npm run build看起来是这样的(默认值)：
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html;
server_name _;
location / {
try_files $uri
浏览 0提问于2020-08-03得票数 0
4回答
我使用react路由器创建了以下内容。 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class Main extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Content} />
<Route path=
浏览 19提问于2019-01-15得票数 1
回答已采纳
我正在使用react-router-dom 5.2.0，当用户不小心设置错误或无效的404 page时，我试图构建一个404 page。
问题
404页在每个路由中呈现。不知道我在这里错过了什么。
router.js
import React, { useEffect } from "react";
import { Route, Switch, useLocation, withRouter } from "react-router-dom";
import Home from "./Pages/home";
import SearchProd
浏览 4提问于2021-07-11得票数 1
回答已采纳
我有一个关于这个链接的反应项目()。如果你向下滚动，你会看到一个叫做(产品类别)，的部分，当你点击其中一个，它会带你到或。但问题是，如果单击上面的链接会给出404页，则只有在单击主页链接()时，它才会显示内容，并且一旦刷新页面，就会得到404页。为什么会发生这种事？？
App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import Navba
浏览 1提问于2021-09-18得票数 3
我是react和gitlab页面托管的新手，目前我在gitlab-pages上托管我的第一个应用程序。几天前，我添加了react-router-dom来在特定页面/路由之间导航。路由运行良好，但是当我试图刷新gitlab上除"/“主域之外的任何页面时，我得到了一个404错误(例如，我在/booked路由上按F5，我的gitlab给了我404错误)。我的配置有什么问题吗？如下所示：
...
import { Route, BrowserRouter as Router } from "react-router-dom";
const routing = (
<Ro
浏览 3提问于2019-01-12得票数 2
我正在尝试将create-react-app部署到具有自定义域的GitHub页面上的相对路径。例如，www.example.com/myproject
我使用的是react-router-dom、react-router-redux和react-router-bootstrap
我已经在packages.json中将主页设置为http://www.example.com/myproject (也尝试了homepage = "." )，并为我的历史记录配置了基本名称：
...
export const history = createHistory({ basename:
浏览 0提问于2017-09-05得票数 25
回答已采纳
2回答
我做了一个简单的AngularJS待办事项应用程序，并使用sw-toolbox。它在我的本地主机上工作得很好，但当我在gh页面上使用它时，控制台上抛出了很少的404错误，服务工作者在获取脚本时也显示了404错误。
浏览 27提问于2017-03-02得票数 1
我有我的routes.js as
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
<Router>
<div>
<Route exact path="/" component={login}/>
<Route path="/calculator" component={calculatorPage}/>
<Route path="/result
浏览 1提问于2018-03-17得票数 1
我目前正在开发React中的一个笔记应用程序，我已经构建了一个404页面，现在如果我转到一个不存在的路线，它会显示一个404页面。例如，如果我转到路线/get-the-note/，我会得到一个404页面。但问题是我有一条路线：
<Route exact path="/single-note/:id" component={Singlenote}></Route>
它需要一个id，如果我输入了正确的id，就像我有一个id没有2的便条，如果我转到路径/single-note/2，它可以工作，但是如果我放了一个不存在的id，比如如果我放了一个不存在的id 12
浏览 0提问于2021-07-29得票数 0
我有这个反应应用程序，一切都很好，但是，我的路线在部署时有问题.
这就是我设定路线的方式
Index.tsx (这里，我有BrowserRouter)
import { render } from 'react-dom'
import { CssBaseline } from '@mui/material'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { storeConfig } f
浏览 2提问于2022-05-02得票数 0
我正在尝试实现ProtectedRoute。但是，当我通过身份验证时，意味着从auth API正确地进行了身份验证，得到了我的令牌，我就被推入主页面，没有问题。但是，当我在浏览器中手动输入URL到受保护的路由时，我会被重定向到Login页面。
正在使用redux工具包将isAuthenticated标志存储在redux存储区中。看看下面的代码
ProtectedRoute.jsx
import React, { useState, useEffect } from 'react';
import { Route, Redirect } from "react-route
浏览 4提问于2021-04-14得票数 0
回答已采纳
我正在创建一个多页面的网站，使用React和托管它的Github页面。这个网站在本地主机上加载的非常好，但是当试图输入一个子页面时，它会在Github页面上遇到麻烦。
主页面显示在Github页面上，但是当单击子页面链接时，Github页面显示错误404页。
404
File not found
The site configured at this address does not contain the requested file.
尽管显示了此错误，但URL的显示方式与本地主机显示的方式相同。
主页
LocalHost: http://localhost:3000/my-websit
浏览 16提问于2022-08-15得票数 1
我正在使用react-router-dom进行路由。当我使用npm start启动应用程序时，我的应用程序会打开，URL为http://localhost:3000/，然后单击一个链接，我将其路由到http://localhost:3000/buyer(直到这里，一切都按照我的意图工作)。现在，当我尝试重新加载页面时，URL没有设置为http://localhost:3000/，而是保持为http://localhost:3000/buyer。 我无法理解为什么在重新加载页面时，我的网址没有设置为初始网址，即http://localhost:3000/ 请有人指导我如何解决它。
浏览 8提问于2021-11-07得票数 0
1回答
最奇怪的事情正在发生。
我有一个要分配父页面的页面。当我将一个特定的父页面分配给它时，该页面将显示一个404错误。
奇怪的是，只有在试图分配一个特定的父页面时才会发生这种情况。任何其他父页面都可以。
例如: www.website.com/city (我的新页面) www.website.com/locations (我想成为父页面的旧页面) www.example.com/locations/city ( URL现在应该放在父页面上，但得到一个404错误)
我可以将任何其他页面指定为父页面，并且不会得到404错误。像这样的例子很好: www.example.com/about/city (这
浏览 0提问于2019-02-19得票数 0
我需要显示一个自定义404页，如果没有这样的网页在网站上。为此，引入了<Route path='*' element={<MissingPage />} />路由并对其进行管理。但除此之外，404页显示在网站上的所有页面的底部，除了主页面。我希望它没有出现
"dependencies":
"@craco/craco": "^6.4.3",
"@emotion/react": "^11.9.0",
"react": "^18.1.0"
浏览 4提问于2022-07-20得票数 2
1回答
我有一个简单的routes.php文件，如下所示：
Route::group(['middleware' => 'cors', 'prefix' => 'api'], function () {
Route::post('users', 'Api\UsersController@save');
Route::get('users/{userId}/leagues/', 'Api\UsersController@saveFavoriteLeague'
浏览 0提问于2016-04-29得票数 0
回答已采纳
1回答
我已经使用react和laravel开发了一个应用程序来显示酒店列表。当用户点击一家酒店时，我希望该酒店的详细信息显示在一种“单一”视图中。然而，尽管在主列表视图中，我使用正确的路由模式链接到单个页面，并且我已经在路由器中定义了该模式，但当我单击该链接时，我将转到一个“404未找到”页面。
编辑帖子的编辑链接也是如此。
任何关于如何解决这个问题的想法都将不胜感激！
谢谢,
罗伯特·杨
伦敦，英国
//App.js (路由器)
import React, { Component } from 'react'
import ReactDOM from 're
浏览 0提问于2021-03-21得票数 1
10回答
我正在使用react-router-dom: 4.2.2。我可以将activeClassName添加到当前的URL中。但令人惊讶的是，类总是添加到根URL中。
当访问一个页面时，例如下面的屏幕截图这样的错误页面，home navlink也得到了activeClass。
更新:我在上面的屏幕截图中显示了我访问了http://localhost:3000/#/error。因此，应该只将active-link添加到Love Error? NavLink中。但正如您所看到的，它也添加到Home NavLink中。
这是我的导航条形码：
import React from 'react
浏览 4提问于2017-12-19得票数 36
回答已采纳
我安装了"react-router-dom": "^6.0.0-beta.0"并创建了一些页面路由。如果不存在页面，则Page404 / NotFound组件将无法工作。由于某些原因，当我使用动态页面/post slug时，如果没有带有此ID的页面/帖子，组件NotFound将无法工作。
在React路由器中是否有解决此问题的选项？
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AllPosts from "compon
浏览 3提问于2021-03-08得票数 1
我有一个自定义404错误页面和一个mod_rewrite规则。如果我访问一个不存在的页面，我将得到404错误页面。我的问题是，如果我从我的php页面发出404头，它不会打开我的404页，相反，我得到以下内容：
Not Found
The requested URL /index.php was not found on this server.
Additionally, a 404 Not Found error was encountered while trying
to use an ErrorDocument to handle the request.
这是我的.htacces
浏览 4提问于2011-09-25得票数 2
回答已采纳
gatsby的404页不起作用。我用src/pages/404.js创建了一个404页面。 我希望我定制的404页面在产品中，但是我得到了一个404未找到的错误(nginx)。 为什么我创建的404页面在生产中没有显示？？
浏览 14提问于2019-12-10得票数 0
我是React/Redux的新手，我想知道如何管理历史。
我使用react-router-dom包中的BrowserRouter，实际上，它似乎已经处理得很好了。我的意思是后退按钮就行了。
但我想知道这是为什么，或者这是否是处理历史的适当方式。有人能给我解释一下这件事吗？
这是我的index.js。
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Prov
浏览 0提问于2018-03-30得票数 0
2回答
使用vue-router 3.0.6
我有几个登陆页面，它们的URL通过API加载到页面上。
我等待呈现<router-view />，直到这个API调用解决为止。
当它解决后，我运行this.$router.addRoutes(routes)
然而，一旦路由器视图是呈现，我得到一个404路由呈现.
如果我导航到主页，并点击一个链接到动态登陆页面，我最初是试图访问加载，它工作良好的。
是否有什么功能可以让vue-路由器重新评估它的可用路由，这可能发生在路由更改到主页，允许下一个导航到动态页面工作？
第一次加载-> /动态路由= 404
第一次加载-> /动态路由->
浏览 0提问于2019-07-18得票数 0
我在django正面临着一个奇怪的问题。我正在使用django-压缩应用程序。直到调试是真的，一切都好。当我执行debug=False时，我会遇到404的内部服务器错误问题，没有js和css的页面在404的情况下面临内部服务器错误问题。最糟糕的是，在控制台上，我得到了以下错误
UncompressableFileError：'css/default.css‘不能通过COMPRESS_URL ('/static/')访问，不能压缩16/Jul/201217:05 "GET /static/img/ via .isn/1.1“500 59
就像这样，它显示了
浏览 5提问于2012-07-16得票数 2
回答已采纳
当尝试通过url /items/best获取时，我得到404。为什么会发生这种情况？我使用了react-router-dom <Router history={history}>
<Switch>
<Route exact path="/items" component={Items} />
<Route exact path="/items/best" component={Bes
浏览 4提问于2020-06-09得票数 0
回答已采纳
我有路线
import { HashRouter } from 'react-router-dom';
<HashRouter>
<BrowserRouter>
<Switch>
<Route path="/admin" render={props => <AdminLayout {...props} />} />
<Route path="/auth" render={props => <AuthLayout {...pr
浏览 2提问于2020-06-04得票数 0
我试图让我的函数运行一次，而且只运行一次，甚至在重新访问页面时也是如此。以此示例(或查看此演示)为例：
import React, { useEffect } from "react";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
const TestOne = () => {
useEffect(() => {
console.
浏览 2提问于2021-02-09得票数 2
回答已采纳
1回答
我正在开发一个React应用程序，它使用react-router-dom与React.lazy()和悬念一起进行代码分割。
这是相同的h页，每个人都遇到了404错误问题，当我在此之前遇到它时，将basename支柱添加到BrowserRouter组件中就可以了。但是，即使在添加了basename 之后，如果我转到某个路由并刷新，则会出现404页。另外，如果我通过浏览器直接访问一个路由，404就会再次出现。
我的当前的解决方案是使用HashRouter而不是BrowserRouter，后者不会让应用程序在生产中中断。然而，它把哈希进入路线。是否有人让BrowserRouter在gh页面或任何其他
浏览 10提问于2021-08-15得票数 0
我想在包含一些特殊页面的目录中添加几个自定义WordPress重写。我添加了一个名为custom的目录，它包含所有的自定义页面。
我添加了重写规则，但由于某种原因，每当我试图访问它们时，我都会得到404错误。这是我的.htaccess的副本
Options +FollowSymLinks
# BEGIN Custom
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /~meddept/
RewriteRule ^contact-us/? /~meddept/custom/contact.php [QSA,L]
</
浏览 2提问于2013-11-11得票数 2
回答已采纳
//第一页
const ArticlePage = ({ match }) => {
const name = match.params.name;
return (
<>
<h1>
This is {name} Article
</h1>
</>
);
}
export default ArticlePage;
//应用程序
import { BrowserRouter, Route, Routes } from 'react-rout
浏览 4提问于2021-12-31得票数 2
回答已采纳
1回答
我创建了我的反应性应用程序(客户端呈现)作为一个单一页面应用程序与反应-路由器-多姆。使用以下方法捕获404页非常简单：
import {Router} from 'react-router-dom';
import {Switch, Route, Redirect} from 'react-router-dom';
...
const Main = () => {
return (
<Router history={history}>
<Switch>
浏览 1提问于2019-01-07得票数 0
回答已采纳
以下是页面/index.js的内容：
import { BrowserRouter as Router,History, Switch, Route } from 'react-router-dom';
import TestSocket from '../components/testSocket/TestSocket';
export default function Index(){
return(
<Router>
<Switch>
<Route exac
浏览 0提问于2021-11-16得票数 0
回答已采纳
import Home from "./pages/home/Home";
import Profile from "./pages/profile/Profile";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Messenger from "./pages/messenger/Messenger";
import {
BrowserRouter as Ro
浏览 30提问于2021-06-25得票数 3
回答已采纳
1回答
我正在尝试建立一个应用程序，学习反应作为前端框架。我最近被介绍到反应路由器和掌握v4。我很难创建一个只有3页的简单应用程序-- Base、Page1和Page2 --它们都只是将导航栏和页面名称作为标题显示。
我做到了这一点，并让它在我的本地服务器上工作。主页面加载，当我单击标题上的链接时，我将被带到正确的页面。我的问题是，当我手动输入url时，我会得到404响应，我不明白为什么。
到目前为止，这是我的工作；
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import
浏览 1提问于2018-03-22得票数 0
3回答
我使用react-router-dom进行路由，而且由于我也使用GitHub页面，所以我需要在Router.jsx中使用HashRouter，如下所示
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Customer from './Customer';
const MyRouter = () => (
浏览 0提问于2018-03-13得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
