尝试提供使用react-router的React SPA
React SPA是指使用React框架开发的单页应用（Single-Page Application）。React是一个用于构建用户界面的JavaScript库，它通过组件化的方式使得开发者可以更方便地构建复杂的用户界面。
React SPA通常使用react-router来实现路由功能。react-router是React官方推荐的路由库，它可以帮助我们在React应用中实现页面之间的切换和导航。react-router提供了一系列的组件和API，可以帮助我们定义路由规则、渲染对应的组件以及处理导航事件。
React SPA的优势包括：
- 单页应用：React SPA是单页应用，页面只加载一次，之后的页面切换通过路由进行，可以提供更流畅的用户体验。
- 组件化开发：React的组件化开发模式使得代码更易于维护和复用，可以将页面拆分成多个组件，每个组件负责自己的逻辑和渲染。
- 虚拟DOM：React使用虚拟DOM来管理页面的渲染，通过比对前后两次虚拟DOM的差异，只更新需要更新的部分，提高了页面的性能。
- 生态丰富：React拥有庞大的生态系统，有大量的第三方库和组件可供使用，可以快速构建功能丰富的应用。
React SPA的应用场景包括：
- 前端应用：React SPA适用于构建各种类型的前端应用，包括企业管理系统、电子商务平台、社交媒体应用等。
- 移动应用：React Native是React的衍生版本，可以用于开发原生移动应用，React SPA可以作为移动应用的前端部分。
腾讯云提供了一系列与React SPA相关的产品和服务，包括：
- 云服务器（CVM）：提供可扩展的云服务器实例，用于部署React SPA应用。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的云数据库服务，用于存储React SPA应用的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储React SPA应用的静态资源。
- 云监控（Cloud Monitor）：提供实时监控和告警服务，帮助用户监控React SPA应用的性能和可用性。
更多关于腾讯云产品的介绍和详细信息，可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我对前端框架有点困惑。我读到，如果你使用ng-route或react-router，它会使你的应用程序成为单页面应用程序，那么这是否意味着，如果我不使用ng-route/react-router，而是使用express进行服务器渲染，该应用程序还会被视为SPA吗？
浏览 15提问于2017-12-13得票数 0
2回答
我有一个关于react-router和google在google结果中缓存页面的问题。在这种情况下，我们有一个SPA，它使用react-router (通过browserHistory)，这里的问题是: google缓存的页面是一个页面包装器，其中URL-a不同于在SPA的路由器中定义的URL，在这种情况下，应用程序的路由落入未找到的页面的定义。(示例)
和谷歌的SPA页面的缓存结果，而不是显示页面的内容，显示组件PageNotFoundApp (未找到页面的路由*)。
你有什么想法，如何解决所描述的问题？
浏览 9提问于2017-02-26得票数 1
通过简单的路由组件使您的ReactJS应用程序成为SPA。在部署到IIS时，使用bashHistory进行设置时一切正常。但是，当我尝试使用browserHistory时，IIS尝试返回一个目录，而不是允许React-Router获取并解析路由。如何设置React-Router以在IIS环境中工作？
浏览 4提问于2016-10-11得票数 12
1回答
我有一个静态的web服务器网站，比方说，托管在亚马逊S3上。
现在，它是一个老的html4多页面站点，它在不同的文件夹中包含许多html文件，
例如：
www.hello.com/welcome.htmlwww.hello.com/en/publication.htmlwww.hello.com/sc/publication.html
...etc
我们计划将站点重写为html5，这样它就可以支持RWD了。
我们喜欢保留路径模式，所以任何有书签的人都可以转到我们的页面。
我们也考虑在SPA框架中重写站点。我们已经学习了react-router，在他们的示例中，包含路径类似于
Www.hello
浏览 3提问于2018-09-06得票数 0
我已经创建了使用React, Redux and React-Router的单一页面应用程序。
为了提高加载应用程序的性能，我希望使用ReactJS.NET呈现这个SPA。
SPA使用Bundle.js编译为一个Webpack。
我有一个ASP.NET MVC应用程序，在那里我可以粘贴这个包，这个包将通过ReactJS.NET呈现。这个SPA中的所有内容都将在一个ASP.NET视图中工作，但可以使用React-router。
我怎么能这么做？我找不到用redux解决这个组合的任何项目。
谢谢你的例子或帮助。
浏览 3提问于2016-10-25得票数 2
回答已采纳
我在SPA中使用了React和React-router。当用户从一个视图导航到另一个视图时，URL会附加散列(例如#/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) )，这是预期的，对所有视图都很有效。
但是，当用户刷新任何视图上的页面时，我希望React-router重定向到Index Route，而不管用户在其中的视图。我可以在React-router中做什么配置来设置它吗？
现在，React-router尝试导航到匹配的路由视图。我只想重定向到Index route/index.html，而不需要任何服务器端重定向。有什么建议
浏览 8提问于2016-08-19得票数 2
回答已采纳
1回答
我正在使用reactjs构建一个SPA。我知道react只提供了MVC的“视图”部分。因此，我使用了React-Router和jquery-ajax。
构建SPA是否足够，或者我是否还需要其他东西，例如redux？
你也可以推荐一些很好的react repos来构建我的网站吗？
浏览 1提问于2016-05-06得票数 0
3回答
我想在我的react spa中使用一个锚标签(使用react-router)。例如，如果我给它一个google.com的href值，它就会扩展我的spa路线，也就是myreactspa.com/sampleRoute/google.com。有没有办法让我的锚标签直接链接到？或者我必须将https://附加到我的href值中吗？谢谢!
浏览 1提问于2019-07-27得票数 1
1回答
我在主要(main.tsx)入口点有以下路由注册代码：
import * as React from "react";
import * as ReactDOM from "react-dom";
import { browserHistory, IndexRoute, Route, Router } from "react-router";
import { About } from "../about/about";
import { Home } from "../home/home";
ReactDOM
浏览 0提问于2016-11-02得票数 0
我的目标是使用Redux和React-Router基于React创建SPA。
为了创建动态Link组件，我应该如何存储我的位置和历史记录？
例如：
<Link to={lastVisitedPage}> </Link>
浏览 0提问于2019-11-25得票数 0
我已经在React中建立了一个SPA，并想从另一个网站链接到SPA ie上的一个特定的‘页面’。但是，由于它是一个在“Switch”中使用“React-Router”和“Link”的SPA，指向或以外的任何内容的外部链接锚自然会显示404错误。我期待这一点，但我想知道是否有一种方法可以到达我的SPA的特定部分，而不是从“登录页面”开始？当然，如果有人知道一种方法，并能为我指出正确的方向，那就太好了。提前谢谢。
浏览 4提问于2021-03-04得票数 0
2回答
嗨，我正在学习反应，并试图创建SPA，但内部页面没有呈现。
只呈现内部组件，而不是呈现以下的内部组件&
无法找到确切的问题
我尝试过多种路径组合，比如
<Route path="/about" component={About}/>
<Route path="about" component={About}/>
我的完整代码
import React, { Component } from 'react';
import {render} from 'react-dom';
// impo
浏览 1提问于2017-05-16得票数 0
回答已采纳
我正在写一个程序，它在后端使用spring-boot (与maven)和一个PostgreSQL数据库，在前端使用react js。 最初，我有一个表示单个网页的test.js文件，它创建了一个fetch请求来与后端控制器通信，而后者又更新了数据库。这起作用了，所以我想更进一步，使用react-router在前端链接多个页面。但是，当我尝试实现react-router时，它导致我的初始fetch请求返回404 (未找到)。 下面是我的新test.js文件中一个fetch请求的示例。 const line = {
name: this.state.name,
id: this.
浏览 11提问于2020-02-01得票数 1
2回答
为SPA工作的路由器，但我似乎无法让它呈现出除了以外的其他任何东西。
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import Parameter from './components/parameter/Parameter';
class App extends React.Component
浏览 2提问于2017-02-15得票数 0
回答已采纳
如何让django将所有未知urls重定向到/
由于项目的react部分使用了react-router，因此它更改了SPA中的url。因此，如果我在应用程序中进入/options，它可以工作，但如果我输入url并从http://example.com/options冷加载，uwsgi会返回404。
要防止这种情况发生，应该做些什么呢？
浏览 0提问于2020-03-18得票数 1
我有一个代理请求到Django的React应用程序，Django安装了allauth来管理社交应用程序登录。但我的应用程序是使用react-router的SPA，所以当我有一个像/accounts/github/login这样的链接时，它似乎只被传递到路由器，而不是试图正确打开。如何免除某些url掩码的路由？
浏览 0提问于2018-04-21得票数 1
我有一个使用react-router的react SPA。该应用程序包含多个调用API的不同搜索。我希望浏览器的后退按钮从缓存加载上一次搜索，而不是再次调用API。
程序大纲如下所示：
App
|
|-- Component
|
|- Search Component (uses push history)
|- Results Component (uses componentDidMount & componentWillReceiveProps that call the API)
浏览 6提问于2018-07-19得票数 0
我在SPA中使用react-router。在我的例子中，浏览器历史记录是/home => /somepage1 => /another => /changepassword
当我在路由/changepassword中做一些事情时，我想转到/login路由，并清除所有以前的浏览器历史记录，并将此路由/login设置为历史上的第一个。
我如何才能做到这一点？
浏览 0提问于2017-08-23得票数 9
我得到了一些模块没有找到webpack的错误，但问题是文件实际上在那里。我已经仔细检查过了，我肯定文件在那里，但出于某种原因，webpack没有找到它们。有没有办法让我了解更多webpack失败的原因？
ERROR in ./~/react-router/BrowserRouter.js
Module not found: Error: Cannot resolve module 'history/createBrowserHistory' in [MODULE_PROJECT_ROOT]\node_modules\react-router
@ ./~/react-route
浏览 3提问于2016-11-08得票数 0
回答已采纳
我正在尝试部署到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
1回答
现在我们已经拥有了构建完整SPA所需的一切(路由: react-router、async: sagas、state: redux等)。架构和创建这种应用程序的过程对我来说很简单，但当我需要创建只有几个独立模块的网站时，问题就开始了，它们需要相互通信。例如，在Facebook上，有几个地方可以通知用户他有新消息，或者当我们单击用户列表中的用户时，会创建新的chatbox。使用React开发工具，我们可以看到创建了新的独立组件。在SPA中，有一个根组件，整个内容都在它里面。所以我的问题是如何解决这类问题？即创建小模块并提供它们之间的通信？
浏览 1提问于2016-10-22得票数 0
我尝试创建SPA，但出现错误。它只适用于404页面的不正确的url
未捕获的错误:元素仅用于路由器配置，不应呈现
import React from 'react';
import { render } from 'react-dom'
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import { Provider } from 'react-redux'
import configureStore from './sto
浏览 0提问于2017-10-07得票数 1
我有一个反应网络应用程序，渲染iframe。iframe显示简单网站或SPA网站。每当iframe中的URL发生变化时，我都想调用一个函数。多个解决方案都在使用"onLoad“，但据我所知，这不适用于SPA应用程序的URL更改。谁有解决方案来检测SPA的iframe URL更改？ 代码示例： function App() {
return (
<div >
<iframe id='iframeid' onLoad={(e)=>{console.log('page loaded', e)}} src=&#
浏览 51提问于2020-10-11得票数 2
我目前正在创建一个SPA，它可以包含并从任何路径运行。
目前，我创建的任何<Link />组件都会将客户端重定向回它所在域的根目录加上预期的路径。
在react-router中，有一个设置起始基路径的属性；basename。
这在preact-router中似乎不存在，我真的不想切换到react-router，因为它要大得多，而且我不会使用许多其他特性。
一个简单的路线例子：
<Router>
<Route
path="/"
component={Home}
/>
<Route
path="/
浏览 2提问于2018-05-10得票数 0
回答已采纳
2回答
我的要求很简单。我只是想在用typescript编写的现有React应用程序中引入React路由器。
我使用以下命令安装了react-router：
npm install react-router-dom @types/react-router-dom
在我的App.js中使用如下：
import * as React from 'react';
import { Link, HashRouter as Router } from 'react-router-dom';
import Routes from './routes';
class
浏览 1提问于2021-04-21得票数 0
1回答
是否可以在不安装node.js的情况下使用react-router？
在我看来，如果不使用node.js，就无法使用react路由器。在我看来，我们应该安装node.js，并使用npm来安装react-router。只有这样我们才能使用它。
react-router是node.js组件还是可以单独下载？
谢谢!
浏览 2提问于2016-02-13得票数 1
1回答
我一直在尝试使用React、React-Router和typescript (从启动)在一个电子项目上创建一个SPA。
我目前正尝试通过<Link>将其重新路由到不同的路由，但我在控制台中收到一个错误消息：
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://settings/' cannot be created in a document with origin '
浏览 0提问于2019-09-13得票数 1
刚刚开始学习React，我正在遵循一个指南来构建一个基本的单页面应用程序。我得到了这个错误：
Warning: Failed context type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at <**shortened url I was forced to remove**>
in e
指向的url是：
那个"in e“不是我的错误
浏览 4提问于2017-05-31得票数 0
我有一个新项目，我尝试使用react-grid-layout来构建仪表板。不幸的是，我不能让它工作。
我使用：
"@types/react-grid-layout": "0.16.5" "react-grid-layout": "0.16.5"
当我尝试在tsx文件中使用它时
import { ReactGridLayout } from 'react-grid-layout';
我得到了错误：
ReactGridLayout没有导出的成员“ /node_modules/@types/react-grid-layo
浏览 86提问于2018-12-11得票数 1
试着用React Router做一个最简单的例子。我看过的每个例子都非常不同，很多都包含了20页的教程。我只想要一个简单的根路径：
...
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare
浏览 18提问于2017-07-04得票数 3
回答已采纳
上下文:我正在使用工具ngrok的付费版本向外部点击打开React环境--我正在使用devServer运行WebPack 4.0。
我去我的应用程序的主页：
https://my-example-domain.ngrok.io
装得很好。
我点击我的应用程序主页上的一个链接，路由器运行良好，我看到了以下内容：
https://my-example-domain.ngrok.io/my-sub-page
但是，如果此时刷新，ngrok就会发出一个404。
Cannot GET /my-sub-page
我怀疑的原因是，在SPA中，内部应用程序的URL是由React-Router的前端处理的，而外
浏览 4提问于2020-09-08得票数 0
回答已采纳
1回答
ReactJS测试的玩笑
、、、
我对我的React组件进行了以下测试
var React = require('react/addons');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;
describe('Navigation', function() {
v
浏览 2提问于2016-06-08得票数 0
回答已采纳
我正在react-application中实现路由。我对react-router 4.0比react-router-redux的优点感到困惑。我也被react-router-dom搞糊涂了。
react-router-redux、react-router 4.0和react-router-dom的优缺点是什么？
浏览 1提问于2017-04-03得票数 36
回答已采纳
我正在尝试为我的react项目设置react-router，但由于某些原因无法为路由器设置设置路径，IndexRoute组件工作正常，但当我尝试访问注册页面时，我收到错误"Cannot get /singup".Any提示，提示我在哪里犯了错？
依赖关系：
"dependencies": {
"express": "^4.16.2",
"nodemon": "^1.14.12",
"path": "^0.12.7",
"reac
浏览 10提问于2018-02-07得票数 0
我无法让Symfony 4在SPA设置中正常工作。
具体地说，当我使用React-router链接导航时，一切都正常工作。
但是，如果我尝试直接访问任何路由( home除外)，Symfony会截获它，当然，还会抛出一个路由未找到的错误。
将Symfony放在子域中并仅将其用作API的替代方案是不可行的，因为我需要框架提供的所有用户和会话管理工具。
当然，我需要Symfony将所有API调用路由到后端。
我使用Symfony 4的默认目录结构，只在顶层为所有react/redux代码添加一个目录/client。
构建代码放在/public/build下。
我还尝试用下面的代码在/public上放
浏览 5提问于2018-03-01得票数 2
我正在创建一个简单的应用程序，并使用react-router进行路由，现在我使用redux进行状态管理。我想知道要在我的应用程序中实现的react-router和react-router-redux之间的区别。提前谢谢。
浏览 0提问于2018-02-06得票数 1
我在内部使用react-boilerplate (3.4.0)和react-router进行路由。
我尝试使用<a href="#anchor-tag“>< /a >创建链接
当我点击它时，我希望用id=anchor-tag滚动到目录
它只是滚动到页面的顶部，即使我使用的是Link组件而不是<A>标记。我们必须关心使用<A>或< Link >吗？
我们应该如何在react-router中创建锚标签？
浏览 11提问于2017-01-19得票数 3
3回答
我的package.json显示我安装了react-router: 0.13.4。但是，当我键入命令npm view react-router时，它显示它正在使用version: '1.0.0-rc3
我甚至尝试过npm install react-router@0.13.4，但npm view react-router仍然生产1.0.0-rc3版本
浏览 0提问于2015-10-17得票数 2
我正在创建一个新的React项目，并且我在react-router和history之间有一个依赖问题：
ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/Actions' in /app/node_modules/react-router/lib
@ ./~/react-router/lib/match.js 15:15-45
ERROR in ./~/react-router/lib/useRouterHistory.js
Mo
浏览 0提问于2016-11-08得票数 7
回答已采纳
4回答
我有一个用Rails后端(API模式)编写的单页应用程序。Rails也提供静态文件。我将Rails路由器指向public/index.html，这样我的SPA就可以使用react-router管理自己的路由。这是一种常见的做法，以使直接链接和刷新工作。
routes.rb
match '*all', to: 'application#index', via: [:get]
application_controller.rb
class ApplicationController < ActionController::API
def index
浏览 4提问于2017-05-11得票数 12
回答已采纳
1回答
我正在使用VoiceOver和Google Chrome，并试图弄清楚为什么在React SPA应用程序中从页面A移动到页面B(无硬页面刷新，通过react-router使用HTML5推送应用程序接口)不会触发VoiceOver的DOM解析刷新。 我使用Accessibility Inspector进行了检查，但在加载Page B时，整个应用程序被认为是一个没有子项的大组。如果我关闭VoiceOver，然后在页面B上重新打开它，那么它就会神奇地被解析。 这在Safari上不是问题。 你知道我怎么才能让VoiceOver解析这棵树吗？
浏览 20提问于2021-02-05得票数 0
尝试在我的项目中实现react-router 1.0.0-rc1，但收到以下错误：
1)警告: React.createElement:类型不能为空或未定义。它应该是字符串(对于DOM元素)或ReactClass (对于复合组件)。2)警告:只有函数或字符串可以挂载为React组件。3)未捕获TypeError:无法读取未定义的属性“”toUpperCase“”
routes.js文件：
var React = require('react');
var ReactRouter = require('react-router');
var Router = Re
浏览 0提问于2015-09-23得票数 0
我正在尝试使用，并收到以下警告：
“PageContainer(.)：React组件类必须扩展React.Component。”
我的代码如下所示
import React from 'react';
import {Link} from "react-router";
import {withRouter} from 'react-router';
import firebase_det from '../../details_data/firebase';
var firebase = require('fi
浏览 4提问于2016-08-27得票数 2
回答已采纳
1回答
我目前正在为一家公司做一个项目，该公司想要一个网站管理员，用户和客户可以隐藏他们的产品(由该公司出售)。重点是产品确实是不同的，而且客户只有一些类别的产品。网站由一个主应用程序和一些微服务组成，这些微服务从主应用程序中分离出来，本身就是不同的项目
是否可以将这些应用程序与react-router (如SPA应用程序)连接起来？
浏览 0提问于2018-02-09得票数 0
如何在react-router中确认导航到其他页面。我使用browserHistory.push()方法来更改路由和react-router版本3.0.5。如何在导航到其他页面之前要求用户确认。？
我尝试过使用onBeforeUnload方法，但它只适用于页面重新加载。如果我们使用react-router的browserHistory进行导航，则无法正常工作
浏览 3提问于2019-01-27得票数 0
1回答
我已经创建了在MERN堆栈上运行的简单web应用程序，我刚刚尝试使用react-router设置我的路由。现在我知道以前有人问过这个问题，但答案是建议向Webpack添加选项，而我使用的是Browserify / Gulp。
我的问题是，除了root之外，我所有的路由都返回了不能获取的路由。
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Redirect = require('react-router').Re
浏览 2提问于2016-05-18得票数 0
我最近为我正在制作的一个简单的SPA安装了react-router和react-router-dom实验版本。安装后，dev服务器编译并启动正常：
Compiled successfully!
You can now view rcg in the browser.
但是，在localhost上的浏览器中，我得到了以下内容：
TypeError: Object(react__WEBPACK_IMPORTED_MODULE_3__["unstable_useTransition"]) is not a function. (In 'Object(react__WEBPA
浏览 23提问于2020-06-02得票数 0
回答已采纳
获取JSX element type 'Route' does not have any construct or call signatures，同时尝试使用TypeScript跟踪本演练。
我的代码：
const Routes = (
<Route path="/" handler={Main}>
<IndexRoute handler={ConnectionModule} />
</Route>
);
导致TypeScript编译器使用上述错误消息抱怨路由和IndexRount导入。
以下是我的导入语句(
浏览 3提问于2016-08-16得票数 2
我正在尝试使用react-router，但当我编写一条简单的路由时，它不能工作，控制台显示Uncaught : Cannot read property 'toUpperCase‘of undefined。
否则，当我不使用工作正常的react-router时
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var App = R
浏览 91提问于2015-06-23得票数 17
回答已采纳
1回答
设置错误反应-路由器
、、、
所以我在建立反应路由器时遇到了很多麻烦。我已经看过多个教程和指南，以及文档，我只是说不出什么不对，我真的很感激任何帮助。
这里有一个指向我在github上的项目的链接，如果您想查看更多的代码，但是我认为大多数的反应性路由器代码都是在那里注释的：。
edit im updating snippet here
////my Render
var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').
浏览 3提问于2015-11-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
