url中断中的子目录使用自定义的webpack设置反应路由
URL 中断中的子目录使用自定义的 webpack 设置反应路由，涉及到前端开发中的路由配置和构建工具 webpack 的使用。以下是对该问题的详细解答：
基础概念
- React 路由：
- React 路由是指在单页应用（SPA）中，通过 URL 的变化来切换不同的视图组件。
- 常用的 React 路由库有
react-router-dom。
- Webpack：
- Webpack 是一个模块打包工具，用于将 JavaScript 模块及其依赖打包成浏览器可识别的文件。
- 可以通过配置文件自定义打包规则和输出设置。
相关优势
- 灵活性：自定义 webpack 设置可以根据项目需求灵活调整打包策略。
- 性能优化：通过合理的配置，可以实现代码分割、懒加载等优化手段，提升应用性能。
- 开发效率：热更新、快速构建等功能可以加快开发和调试速度。
类型与应用场景
- 开发环境配置：适用于本地开发时的快速迭代和调试。
- 生产环境配置：针对线上部署进行优化，如压缩代码、去除无用文件等。
具体实现步骤
假设我们要在 URL 中断的子目录（如 /app）下使用自定义的 webpack 设置来处理 React 路由，可以按照以下步骤进行：
1. 安装依赖
首先，确保安装了必要的依赖包：
npm install react-router-dom webpack webpack-cli --save-dev2. 配置 Webpack
创建或编辑 webpack.config.js 文件，添加自定义设置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/app/' // 设置子目录路径
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
historyApiFallback: true // 支持 HTML5 History API
}
};3. 设置 React 路由
在 src/index.js 中配置路由：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
ReactDOM.render(
<Router basename="/app">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>,
document.getElementById('root')
);可能遇到的问题及解决方法
1. 404 错误
当直接访问子目录下的某个路由时，可能会遇到 404 错误。这是因为服务器没有正确处理前端路由。
解决方法：
- 在服务器配置中添加一个通配符路由，将所有未匹配的请求指向
index.html。 - 例如，在 Nginx 中可以这样配置：
location /app {
try_files $uri $uri/ /app/index.html;
}2. 构建输出路径错误
如果构建后的文件没有正确输出到预期的子目录中。
解决方法：
- 检查
webpack.config.js中的output.publicPath设置是否正确。
示例代码
以下是一个完整的示例，展示了如何在子目录 /app 下使用自定义 webpack 设置处理 React 路由：
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
historyApiFallback: true
}
};src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
ReactDOM.render(
<Router basename="/app">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>,
document.getElementById('root')
);通过以上配置，可以在 URL 中断的子目录 /app 下顺利使用自定义的 webpack 设置处理 React 路由。
相关·内容
想知道什么是地狱main.js我正在查看我的代码，并看到我已经定义了它在我的webpack配置； module.exports = { entry设置是正确的，但我想我一定是遗漏了什么？/> return ( <h2>About</h2>
</div&g
浏览 24提问于2021-08-11得票数 0
我已经创建了使用React, Redux and React-Router的单一页面应用程序。我有一个ASP.NET MVC应用程序，在那里我可以粘贴这个包，这个包将通过ReactJS.NET呈现。这个SPA中的所有内容都将在一个ASP.NET视图中工作，但可以使用React-router。
我怎么能这
浏览 3提问于2016-10-25得票数 2
回答已采纳
我试图在我的创建-反应-应用程序中实现最小的路由，使用的是反应路由器-redux。文档表明，如果不使用创建-反应-应用程序，需要配置Webpack以使url刷新按预期工作(与‘历史倒退’相关的设置)，但如果使用创建-反应-应用程序，这应该会自动工作。但是，在我的开发环境<em
浏览 4提问于2017-03-29得票数 0
回答已采纳
在过去的3天里，我一直在尝试在一个电子应用程序中实现，而不知道还可以尝试什么。我跟踪许多评论，帖子，问题，试图复制他们做了什么，但没有给我足够的信息，整个设置，以便我可以找到什么，我错过了。我已经试过电子webpack了，但它对我没有用。它有webpack的HMR，但没有反应热加载程序，这使应用程序使用反应路由器是一个痛苦的工作。预期行为
项目设置与电子，
浏览 0提问于2019-08-28得票数 1
我将发布我的routes.jsx文件和来自index.jsx的ReactDOM.render，向您展示我将提供者组件browserHistory作为属性提供的位置。<Route path="/support" component={Support} /> </Route>渲染在index.jsx中的应用browserHistory} routes={routes
浏览 0提问于2016-06-20得票数 0
我的反应有点困难-路由器2.x配置，特别是应用程序basename。
在redux操作中指定重定向路由</e
浏览 3提问于2017-01-03得票数 11
1回答
在反应性路由器4中，我遇到了路由匹配问题。我的路由是： <Route exact path='/' component={Home} />
对于/communities&#x
浏览 3提问于2017-11-04得票数 0
回答已采纳
2回答
假设webpack配置如下 entry: path.join(__dirname, 'src', 'index.js'), path: path.join(__dirname, 'build'),},
和从react脚本构建(静态包含css，js和媒体在单独的文件夹)问题：webp
浏览 0提问于2018-09-05得票数 38
回答已采纳
嘿，伙计们，我已经构建了一个带有顺风和sass应用程序的react应用程序，当我尝试运行build时，我会得到一个错误：这是文件：module.exports17.0.39", "@types/react-helmet": "^6.1.5",
"extract-text-webpack-pluginre
浏览 13提问于2022-02-19得票数 2
1回答
多任务窗格- Office
、、、、
我还没有广泛地测试我的设置，但到目前为止，我能够打开任务窗格只是很好的w/不同的HTML文件。我的第一次尝试(工作)是在XML /a脚本中定义一个TaskPane，该脚本将taskpane.html后加载的页面重定向到所需的页面。我是通过taskpane.js中的以下函数完成这一任务的，该函数是从command外接程序调用的：
Office.onReady((i
浏览 8提问于2022-02-15得票数 0
我有以下webpack配置文件：var path = require('path');
entry: [
浏览 5提问于2016-10-30得票数 11
回答已采纳
ArticleComments}/> </Switch></BrowserRouter>
因此，当我从组件加载的路径上删除'/:id‘或’/注释‘时，路由’/ path /:id‘和’/制品/注释‘将无法加载任何内容。
浏览 0提问于2017-11-08得票数 0
回答已采纳
对于我的CryptoCurrencypage，我想为所有可用的货币创建一条路线。我有一个主要组件，它保存了所有可能的路由，在那里，我从redux获得加密数据，映射到该数组上，并为每种货币创建了一个路由。当我在mainPage(加密者)上并点击其中一个时，它工作得非常好，但是当我刷新站点或尝试直接导航到特定的详细信息页面时，它就失败了。我怎么才能让它起作用？
浏览 1提问于2018-05-15得票数 0
回答已采纳
我正在建立一个应用程序与流明的后端和角度的前端。Lumen处理路由，并为具有页眉和页脚的基本模板提供服务，其中angular接管控制内容。我正在尝试添加一个url参数到一个路由，但是它破坏了我到脚本的所有路径，因为它把它看作一个子目录而不是一个参数。在Lumen中，我的路线如下所示：
$app->group(['prefix' => 'user', 'mi
浏览 0提问于2015-07-24得票数 2
2回答
当使用反应性路由器-dom时，我应该能够创建一个路由并通过在URL中手动输入它的路径导航到它吗？prequote" component={LoadingSpinner} /> </Router>因此，我将在本地主机上，当我在/prequote中手动键入‘url’到<em
浏览 2提问于2017-04-24得票数 5
2回答
但是，当我手动输入带有查询参数的URL时，例如：/experiments?offset=50，路由不匹配！但是，当我使用<Link to={{ pathname='/experiments', query={offset:50} }} />导航时，一切都如愿以偿。呈现实验组件，并将this.props.location.query.offset设置为50。
当手动输入带有查询字符串的URL (或复制粘贴)时，
浏览 6提问于2016-12-22得票数 5
1回答
我正在尝试从给定域中的子目录运行，例如，子目录是。我使用创建-反应-应用程序的设置和项目结构。根据文档，我正在使用下面的技术来使react从子目录中工作 import {
BrowserRout
浏览 9提问于2022-08-07得票数 1
1回答
反应路由器不工作
、、
我有一个简单的反应-路由器设置。请看我的密码-
import React from 'react';
import ReactDOM from 'react-dom';即使我更改了URL，IndexComponent也总是被挂载。另外，如果我键入，它会以某种方式更改为，并停留在IndexCompo
浏览 1提问于2015-12-29得票数 0
回答已采纳
我想发展我在这个领域的技能，经过大量的研究，我不明白为什么我们在使用react时需要有两个不同的运行端口/应用程序？首先，我使用NodeJS、Express、EJS引擎开发了一些简单的应用程序，并将其部署到Heroku。到目前为止，这对我来说还不错。我可以用这些技术(包括MonoDb )来开发我的所有人员站点。但是，为了成为完整的MERN Stack开发人员，我开始搜索、反应，并意识到它只能通过提供另一个端口来像客户端应用程
浏览 0提问于2019-08-05得票数 11
回答已采纳
我对反应的方式有一个问题-路由器构造一个URL。目前，URL给了我这个页面的结构：http://localhost:3000/#/?://localhost:3000/#/about
我读到了browserHistory，它是由反应路由器支持的。它使用内置在浏览器中的History API来操作URL
浏览 2提问于2016-01-21得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
实时音视频活动推荐
腾讯云开发者
