开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CRA(create- react -app)创建的react web总是重定向到'/‘

CRA (create-react-app) 是一个用于创建 React Web 应用程序的脚手架工具。它提供了一个简单的方式来初始化和配置 React 项目，使开发者能够快速开始构建应用程序。

当使用 CRA 创建的 React Web 应用程序总是重定向到 '/'，可能是由于以下原因之一：

路由配置问题：React Web 应用程序通常使用路由来管理不同页面之间的导航。如果应用程序的路由配置有误，可能会导致重定向到根路径。请确保路由配置正确，并且没有错误地将所有路径都重定向到根路径。
默认路由问题：CRA 默认使用 React Router 来处理路由。如果没有显式地定义其他路由规则，React Router 可能会将所有未匹配的路径重定向到根路径。您可以检查应用程序的路由配置文件，确保没有未处理的路径导致重定向。
服务器配置问题：如果您的应用程序部署在服务器上，服务器的配置可能会导致重定向到根路径。请确保服务器配置正确，并且没有将所有请求都重定向到根路径。

为了解决这个问题，您可以按照以下步骤进行排查和修复：

检查路由配置：查看应用程序的路由配置文件，确保没有错误地将所有路径都重定向到根路径。
检查默认路由设置：如果您使用了 React Router，确保没有未处理的路径导致重定向。您可以添加适当的路由规则来处理这些路径。
检查服务器配置：如果应用程序部署在服务器上，检查服务器的配置文件，确保没有将所有请求都重定向到根路径。

如果您需要更详细的帮助或进一步的指导，可以提供更多关于您的应用程序和环境的信息，以便我们能够更准确地帮助您解决问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:create- react -app命令在使用cra-template安装react-dom react-scripts时卡住 npm错误！使用create- react -app创建react项目时超出了最大调用堆栈大小 React Web App到React Native React重定向重定向到错误的路径使用cmd通过create- react -app为react创建新应用程序时出错使用create- React -app创建新react组件的最佳方式使用create- React -app创建的react应用程序无法启动，返回错误使用create- React -app在react应用程序中获得更详细的输出使用create- React -app将react应用程序部署到github页面不起作用使用npx create- react -app my-app创建新的react应用程序时出错

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

你的第一个React App (一 ) - 项目初始化

开始使用React的最佳方式是投入其中。在这篇文章中，我将带您经历一个简单的开发过程，创建一个用于跟踪待办事项的应用程序。准备开发环境需要为React的开发做一些准备。...在接下来的部分中，我将解释如何设置和准备创建您的第一个项目。首先我们来搭建开发环境。安装NodeJS (版本：12.xx.xx)，从Node官网下载安装，进行安装。...安装create- react-app (npm install --global create-react-app) 安装一个编辑器（Visual Studio Code，Sublime Text）总之选一个你熟悉的...创建React项目我们通过命令行创建和管理项目。打开一个新的命令提示符，导航到一个存放项目的位置，运行以下命令来创建新的项目。...$ npx create-react-app todos 一切正常的情况下，将会在目录下看到todos这个项目。进入到todos目录下，添加bootstrap css框架。

8401 0

使用 WebStorm 创建 React App构建通用的 React 和 Node 应用

image.png /usr/local/bin/node /usr/local/lib/node_modules/create-react-app/index.js ....Creating a new React app in /Users/jack/WebstormProjects/helloworld. Installing packages....npm run build Bundles the app into static files for production....Done 构建通用的 React 和 Node 应用原文：Build a universal React and Node App 演示：https://judo-heroes.herokuapp.com.../ 译者：nzbin 译者的话：这是一篇非常优秀的 React 教程，该文对 React 组件、React Router 以及 Node 做了很好的梳理。

1.6K1 0

从零开始react实战:云书签-1 react环境搭建

创建 create-react-app 安装 npm install -g create-react-app 创建 react 应用 create-react-app bookmark-world 生成的目录结构如下图所示...首先安装依赖在 2.1.x 版本的 react-app-rewired 需要配合customize-cra来进行配置覆盖。...所以需要安装如下依赖： react-app-rewired ,配置覆盖 customize-cra ,配置覆盖 antd ,ui 库 babel-plugin-import ,按需引入 antd less...，当前面的都不匹配就会匹配这个（因为没有开启exact且 path 为/),然后重定向到/404 后续用到嵌套路由时会更加深入的讲解路由相关。...如果响应码为 401，重定向到登录页面。配置 redux redux 算是 react 的一大难点。这里我们可以把 redux 理解成一个内存数据库，用一个对象来存储所有的数据.

3.5K3 0

使用 GitLab CI 在云开发上部署React应用

本文使用create-react-app创建了一个React应用，借助Gitlab CI向大家讲述将项目部署到云开发静态网站托管的过程。...GitLab中创建 test-cra 项目到GitLab首页，点击NewProject创建新的工程 Project Name和Project Slug都填上test-cra，点击Create Project...创建web应用在本地环境通过create-react-app创建了一个名为test-cra的项目： yarn create react-app test-cra 设置git相关设置，并上传应用到GitLab...EnvId的value为环境ID 创建.gitlab-ci.yml配置文件在本地工程test-cra的根目录中创建.gitlab-ci.yml文件 .gitlab-ci.yml配置文件如下，这里可查看更多的...有丰富Web应用开发经验和在前端工程化方面有较多的实践。

2K1 0

打通GitLab CICD到腾讯云的静态网站托管

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持本文使用了create-react-app...创建了一个React应用，并把该应用部署到腾讯云的静态网站托管。...有丰富Web应用开发经验和在前端工程化方面有较多的实践。...GitLab中创建test-cra项目到GitLab首页，点击NewProject创建新的工程 15865863325571.jpg Project Name和Project Slug都填上test-cra...，点击Create Project 15865860008180.jpg 创建web应用在本地环境通过create-react-app创建了一个名为test-cra的项目 yarn create react-app

4.2K16 11

create-react-app项目支持多入口注意事项

create-react-app 配置多个html入口的方法，有很多现成的文章资料，但是其中有个3个细节点，大家讲解的不详细，本文做说明1....利用react-app-rewired没有办法优雅的实现多入口官方文档中At this point in time, it is difficult to change the entry point...The normal rewiring process gets bypassed by several of the create-react-app scripts.经测试确实无法直接配置多入口官方推荐的三种方法...重写覆盖函数react-dev-utils/checkRequiredFiles来始终返回true（目的是为了绕过CRA强制校验入口文件）三种方法都不够优雅，最终我的项目还是eject暴露webpack...开发模式重定向配置举例需要拆分业务页面和登录页面，业务页面为域名首页即 / 即可重定向到 index.html，而登录页为/login，如何重定向到 login.html，大部分资料中会建议如下配置historyApiFallback

1K1 0

create-react-app初探

本文作者：IMWeb IMWeb团队原文出处：IMWeb社区未经同意，禁止转载 create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个...CRA还能干嘛 CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。...，探查CRA实现的原理。...入口为create-react-app/packages/react-scripts/bin/react-scripts.js，这个脚本会在react-scripts中设置到package.json的bin...webpack方式几乎没什么区别，首先会通过configFactory创建出一个webpack的configuration object，然后通过createDevServerConfig创建出一个devServer

1.2K1 0

定制 create-react-app：如何制作自己的模版

其中之一就是 Create React App(CRA)，该 CLI 工具帮助 JavaScript 开发者不用配置就能创建 React 应用。...可即便是应用了 CRA 这么棒的工具，开发者仍需要稍作调整，增加 CRA 中不含的特别的脚本和模块等。今天，我将教你如何为自己的团队创建自定义的 create-react-app 脚本。...有很多包括 JavaScript 新人在内的开发者，一天天的简直是胡乱地创建 React 应用，所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全...发布 react-scripts 到 NPM 在发布到 npm 之前，我们需要将 react-scripts/package.json 文件中 name 属性的值改为 unicodelabs-react-scripts...总结好的程序员会日常不断地打磨他们的工具以提高生产力。CRA 是一个快速创建 React 应用的利器。

1.3K1 0

使用React创建一个web3的前端

在本教程结束时，你将拥有一个用 React 构建的功能齐全的 web3 前端。你也将获得构建任何通用的 web3 前端所需的基础知识（除了 NFT minter）。...如果没有，强烈建议你先看一下React 网站的官方教程[6]。设置项目让我们从使用create-react-app创建一个 React 项目开始。...我们现在需要复制 JSON 文件到 React 项目。在src文件夹中创建一个名为contracts的新文件夹并粘贴NFTCollectible.json文件。你应该已经有了部署的智能合约的地址。...我们不打算费力地创建单独的组件文件。相反，我们将在App.js中编写所有的 HTML 和逻辑，在App.css中编写所有的 CSS。将以下 Github gist 的内容复制到App.js文件中。...你现在有了一个功能齐全的 web3 前端，用户可以通过它来铸造 NFT。然而，正如你可能已经注意到的，网站的用户体验还有很多需要改进的地方。以下是你应该考虑做的一些改进。

2.1K3 0

我们如何使用 Next.js 将 React 加载时间缩短 70%

Causal 的前端是在 2019 年用 Create React App（CRA）构建的，它为我们提供了很好的服务——它只需要最小的初始设置，并允许快速迭代。...Next.js 是一个框架，带有构建工具和运行时库，用于创建丰富的 React 应用程序。...这个服务器负责提供重定向服务，在服务器端渲染动态页面，同时也提供静态页面。...Causal 模型通常是由几个人创建的，但也有几十个人查看；这些查看者看的是模型仪表板。...例如，我们的主页（my.causal.app）的加载速度提高了 71%（1.7 秒 → 0.5 秒），除了从加载状态到载入状态的必要过渡，没有任何布局上的跳跃。性能上的好处不仅仅是用户体验。

4.7K1 0

Ant Design Landing

我们直接在create-react-app里使用 Ant Design Landing 的模板，create-react-app 是业界最优秀的 React 应用开发工具之一，也可以直接下载官方给出的Demo...安装与初始化 create-react-app的安装和初始化： npm init react-app my-app 安装完成后，目录结构: ├── README.md ├── node_modules...文件路径我们直接将从 Landing 上下载的 Home 文件夹直接拷贝到 src 文件包里; ├── README.md ├── ... ├── public │ ├── ... │── src...test", + "test": "react-app-rewired test", } 创建config-overrides.js 然后在项目根目录创建一个 config-overrides.js...navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being

1.7K1 1

create-react-app初探

create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个react的SPA应用。...CRA还能干嘛 CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。...，探查CRA实现的原理。...入口为 create-react-app/packages/react-scripts/bin/react-scripts.js，这个脚本会在react-scripts中设置到 package.json...webpack方式几乎没什么区别，首先会通过 configFactory创建出一个webpack的configuration object，然后通过 createDevServerConfig创建出一个

7342 0

怎样创建你的第一个React Native App

因此，你需要学习如何用 React Native Starter 创建全新的移动应用程序，了解其设计模式并尝试理解如何确保主代码干净且可扩展。 ?...什么是 React Native Starter？首先，所有创建应用程序的人通常都会面临相同的旧问题。这包括需要了解要选择的适当技术栈，正确添加导航的方法以及知道管理其数据的方法等。...用 React Native Starter 开始一个全新的 App 项目所需的先决条件：要使用本教程，你必须对 React 和 JavaScript 有所了解。...打开当前的导航页面（src / modules / navigation / MainTabNavigator.js），你会注意到其中包含的内容以及导航器中每个页面的使用情况。 ?...原文：https://medium.com/flatlogic/how-to-make-your-first-react-native-app-c79b0ad4b0a ?

2.1K2 0

【Scratch入门到精通】使用CRA搭建项目

一，前言本文教你从0到1教你，如何使用 create-react-app 搭建scratch项目，实现简基础的积木编程与舞台渲染效果。...1.1 技术栈 web 框架 react redux react-redux 脚手架 create-react-app 积木编程技术 scratch-blocks scratch-vm scratch-render...新建项目使用create-react-app创建 Typescript React 项目。...定制CRA配置 react-app-rewired 可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有...2.2.1. react-app-rewired 安装 react-app-rewired $ yarn add -D react-app-rewired customize-cra 2.2.2. config-overrides.js

1.4K2 0

react项目实战教程(react项目实战)

文章目录项目实战前的准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App...路由 1-5 路由的懒加载项目实战前的准备工作 React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件...React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面在项目根目录src文件下创建views文件夹然后在views文件夹里创建所需要页面,.../admin主页面的路由进入到App组件 { mainRoute.map(route=>{ return <Route path={...article articleEdit settings <Redirect to={ admainRoute[0].pathname} from="/admin" exact/> //重定向到

2.4K5 0

VS Code 调试完全攻略（5）：基于浏览器的 React 应用

这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。...创建 launch.json 我们需要为这个小项目创建一个 launch.json。...launch.json 看一下第 8 至 12 行： { "type": "chrome", "request": "launch", "name": "Debug CRA web...app in Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/react-cra" }...重新启动函数或整个应用原文链接 https://charlesagile.com/debug-create-react-app

2.2K2 0

快将你的 React 应用迁移到 Vite 吧，速度太快啦

大多数人使用 Create React App 来创建 React App。虽然它支持所有开箱即用的配置。...这增加了：开发时间，因为每次更改我们需要等待 2 到 6 秒。生产构建时间，部署快速修复可能需要大约 10 到 20 分钟。 But, 时间就是金钱。为什么 CRA 如此慢？...我们可以迁移到 Vite，而不是使用 CRA 来创建 React App。Vite 是下一代前端工具，可以更快地构建应用程序。...Vite 构建整个应用只用了 9.11 秒，与 CRA 相比似乎更好。因为它在使用 Vite 时减少了 40% 到 50% 的构建时间。...: 将你的 env 从 REACT_APP 更新为 VITE，如下所示: // From REACT_APP_ENV

1.2K2 0

创建 React 应用的 7 种方式，你用过几种？

一：Create-React-App 首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra) npx create-react-app my-app...因此社区中提供了一些可配置的 cra 方案，craco、react-app-rewired craco 可配置的 cra 这里以 craco 为例，首先需要安装 @craco/craco yarn add...> ) 创建 App 组件新建一个 App.js 文件 // ....老项目迁移会存在一定成本，可以参考我之前的文章《将 React 应用迁移至 Vite》四：Gatsby Gatsby 不仅仅是一个静态网站生成器，它更是一个渐进式 Web 应用生成器。...： ✅ 页面渲染性能优秀 ✅ 对 SEO 友好 ✅ 对打包文件进行了优化 ✅ 轻松部署到 CDN（基于出色的扩展功能） ✅ 丰富的插件系统 Gatsby 的劣势： ⛔️ 使用起来相较于 CRA 更为复杂

6.3K1 0

在 cra 等非 umi 项目中使用 dumi2

如果项目是使用 Umi 搭建的，使用 dumi 非常简单，只需要安装 dumi 并在 src 目录下创建 .md 文件即可。...但如果项目是使用 cra (create-react-app) 或其他技术栈搭建的，就需要做一些额外的配置。本文将介绍如何在 cra 等非 umi 项目中使用 dumi。 1....# 这是一个 Dumi 结合 create-react-app 的 Demo 6. 将 dumi 的临时文件添加到 .gitignore 中。 .dumi 7....如果想要构建文档并部署到 GitHub Pages 或其他平台，你可以运行 yarn dumi-build 命令来生成静态文件，并根据部署平台的要求进行相应的配置。...未经允许不得转载：w3h5-Web前端开发资源网 » 在 cra 等非 umi 项目中使用 dumi2

3774 0

React系列：react项目的创建到可以编写业务的一些列初始化

作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主擅长领域：全栈工程师、爬虫、ACM算法 react项目的创建到可以编写业务的一些列初始化安装各种依赖 npx...create-react-app 项目名创建项目 npm install react-router-dom 安装路由 npm install sass -D 安装sass npm install antd...中引入路由 import React from 'react'; import ReactDOM from 'react-dom/client'; import App from '..../App'; import {RouterProvider} from 'react-router-dom' import router from '....配置仓库在gitee上自己创建仓库，在自己电脑上配置ssh key，（网上找一个配置过程或者找我之前的文章看一下） cd 到你的本地项目目录下 git add * git commit -m “

1651 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭