首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >ReactJS产品生成与反应-路由器不工作

ReactJS产品生成与反应-路由器不工作
EN

Stack Overflow用户
提问于 2019-09-23 07:55:12
回答 1查看 1.9K关注 0票数 0

我用react-router创建了一个简单的应用程序,其部分如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                    <BrowserRouter>
                      <Switch>
                        <Route
                            exact
                            path="/"
                            render={() => <Redirect to="/home" />}
                        />
                        {layoutRoutes.map((prop, key) => {
                          return (
                              <Route
                                  path={prop.path}
                                  component={prop.component}
                                  key={key}
                              />
                          );
                        })}
                      </Switch>
                    </BrowserRouter>

但是,当应用程序构建并部署到web服务器时,它会被呈现为一个白色页面,甚至不会重定向到/home组件。

该应用程序本身是通过create-react-app创建的,package.json看起来如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "formik": "^1.5.8",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "3.1.1",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "json-server": "^0.15.1"
  }
}

有任何线索吗?为什么要将开发环境作为npm start来处理,而不是在构建和部署时?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-23 10:15:07

我发现这很有帮助:

如果使用Apache,则需要在公用文件夹中创建如下所示的.htaccess文件:

选项-MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html QSA,L

当您运行npm run build.时,它将被复制到npm run build文件夹中。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58066075

复制
相关文章
【Android 组件化】路由组件 ( 使用 JavaPoet 生成路由表类 )
在 【Android 组件化】路由组件 ( 构造路由表中的路由信息 ) 博客中解析了注解的节点及注解属性 , 将路由信息封装在了 RouteBean 中 ;
韩曙亮
2023/03/29
6160
【Android 组件化】路由组件 ( 使用 JavaPoet 生成路由表类 )
【Android 组件化】路由组件 ( 路由组件结构 )
在之前博客 【Android 组件化】使用 Gradle 实现组件化 ( 组件 / 集成模式下的 Library Module 开发 ) 的组件化项目中 , 可能涉及到跨 Module 的调用 , 如在 library1 模块中打开 library2 模块中的 Activity 界面 , 或调用其它 Module 中的功能 ;
韩曙亮
2023/03/29
4400
【Android 组件化】路由组件 ( 路由组件结构 )
【Android 组件化】路由组件 ( 路由框架概述 )
路由框架 仅限于在 集成模式 下使用 , 组件模式下 , 路由框架不起任何作用 ;
韩曙亮
2023/03/29
5330
vue 路由组件
单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面完成,这一切都由JavaScript来控制。
章鱼喵
2019/10/17
6250
【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
在【Android 组件化】路由组件 ( 注解处理器参数选项设置 ) 博客中在注解处理器中 , 获取了在 build.gradle 中设置的参数 ;
韩曙亮
2023/03/29
5520
【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
eclipse如何根据类名查找该类所属的maven组件
这个需求是后期整改项目或者看别人的代码时有时会遇到的一个问题,我的解决方案类似于曲线救国,下面给出思路:
johnhuster的分享
2022/03/29
9130
eclipse如何根据类名查找该类所属的maven组件
根据公司的业务需求我是如何封装组件的
作者:lin1997 原文链接:https://juejin.im/post/6888125003024629768
coder_koala
2020/11/10
3.7K0
根据公司的业务需求我是如何封装组件的
ASP.NET的路由系统:根据路由规则生成URL
前面我们已经提到过,ASP.NET 的路由系统主要具有两个方面的应用,其一就是通过注册URL模板与物理文件路径的匹配实现请求地址和物理地址的分离;另一个则是通过注册的路由规测生成一个相应的URL。后者通过调用RouteCollection类型的GetVirtualPath方法来实现。[源代码从这里下载] 如下面的代码片断所示,GetVirtualPath定义了两个GetVirtualPath方法重载,它们共同的参数requestContext和values分别表示请求上下文(RouteData和HTTP上下
蒋金楠
2018/01/15
1.3K0
ASP.NET的路由系统:根据路由规则生成URL
【Android 组件化】路由组件 ( 注解处理器中使用 JavaPoet 生成代码 )
在 【Android 组件化】路由组件 ( 注解处理器获取被注解的节点 ) 博客中 声明了 支持的注解类型 , 并在 Activity 中使用了注解 , 在 注解处理器 中检测出来使用注解的 类节点 TypeElement ;
韩曙亮
2023/03/29
4970
【Android 组件化】路由组件 ( 注解处理器中使用 JavaPoet 生成代码 )
React路由 及 React 路由中核心组件
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136454.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/07
1.4K0
【Android 组件化】路由组件 ( 组件间共享的服务 )
路由除了支持 Activity 之外 , 还要支持 组件间共享的服务 如 工具类 , 逻辑功能 等 ;
韩曙亮
2023/03/29
8720
【Android 组件化】路由组件 ( 组件间共享的服务 )
Vue 组件通信与路由
命名路由 绑定自定义的属性:to =" {name: '路由的名字'}” 路由的参数 path: ' /user/:id :to= "{name: 'user' , params:{id:1}}" path: ' /user' :to= " {name:'user' , query:{userId:1}}" 嵌套路由(应用子的路由是不同的页面结构) /home/music ===> /home/ movie 一个router-view中嵌套 另外一个route-view
默默的成长
2022/10/29
7100
springboo根据目录结构自动生成路由前缀
配置文件中配置api的根目录 missyou: api-package: com.lin.missyou.api 重写getMappingForMethod方法 import org.springframework.beans.factory.annotation.Value; import org.springframework.web.servlet.mvc.method.RequestMappingInfo; import org.springframework.web.servlet.mvc.m
听城
2020/05/09
5920
如何使用Vue封装组件[通俗易懂]
想封装组件呢首先要思考: 1.你想向用户暴露哪些属性 (props) 2.你想向用户暴露哪些事件,让用户监听来处理后续的业务 ($emit,@) 3.你想让用户嵌入哪些自定义的内容(slot)
全栈程序员站长
2022/11/09
1.7K0
如何在路由绑定中使用 IParsable
IParsable 是 .Net 7 中新增的接口,它可以将字符串转换为对应的实体。在 Controller 的 Route 绑定中可以使用 IParsable 来绑定复杂的实体。
newbe36524
2023/08/23
1460
Vue使用bus进行组件间、父子路由间通信
Vue使用bus进行组件间、父子路由间通信
Java架构师必看
2021/09/14
5270
ETL(八):路由器(rounter)转换组件的使用
注意:edw_emp_deptno_20和edw_emp_deptno_30都要按照图中方式进行修改。 ⑤ 使用CTRL + S保存该创建的任务;
数据分析与统计学之美
2021/11/25
5280
路由组件传参实例 原
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的URL上使用,限制了其灵活性
tianyawhl
2019/04/04
7190
【Android 组件化】路由组件 ( 生成 Root 类记录模块中的路由表 )
注解处理器 为每个 Module 模块生成一个路由表 , 该模块下凡是被 @Route 标注的路由节点都在该路由表中维护 ;
韩曙亮
2023/03/29
2.6K0
【Android 组件化】路由组件 ( 生成 Root 类记录模块中的路由表 )
如何使用小程序表单组件
上一篇文章中,我们给大家介绍了小程序的视图容器及基础内容组件,该组件主要应用是输出内容。接下来这篇文章中,我们将继续介绍小程序最常用的表单组件,该组件主要应用是获取输入内容。表单组件分为11个组件,我们将对这11个组件使用做详细的介绍。
此昵称已隐藏_
2018/11/06
5.2K0

相似问题

如何从基类初始化属性?

220

在基类和派生类中初始化基类属性

40

声明派生类的对象,初始化基类的属性

11

初始化基类

22

是否将基类初始化为派生基类?

33
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文