Я постараюсь заглянуть на статическую страницу и посмотреть, смогу ли я найти какую-то форму разрешения из этого. В худшем случае, если это проблема, я буду либо просто использовать HashRouter, либо переходить на маршрутизатор v3. Хотя было бы неплохо, если бы на самом деле был способ обслужить эти файлы с помощью BrowserRouter без дополнительной настройки, но я не уверен, что webpack-dev-server может это разместить.
я проблема с тем, что я не могу перейти к Маршрутам с путями больше 1 раздела, как при использовании[email protected]
Кроме того, это ссылка Github на репозиторий, где у меня возникла эта проблема.
https://github.com/ShawnCholeva/React-Typescript-Webpack4-Router
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//All routes work if I use HashRouter here instead of BrowserRouter
class App extends Component {
render(), {
return (
<Router>
<Switch>
<Route exact path='/' component={ Login }/> <--- Works
<Route exact path='/accountSetup/:guid?' component={ AccountSetup }/>
^-- Above works when just '/accountSetup' but fails when I do '/accountSetup/123'
<Route component={ NotFound } /> <--- Works
</Switch>
</Router>
);
}
}
Поэтому я заметил, что это работает, только когда я использую HashRouter вместо BrowserRouter. Так что это заставило меня задуматься о том, как я могу подать заявку через[email protected]
, Итак, я увидел, что мне пришлось добавить свойство historyApiFallback к моему объекту свойств devServer, используя[email protected]
вот так:
devServer: {
compress: true,
port: 8080,
historyApiFallback: true,
contentBase: path.resolve(__dirname),
publicPath: '/',
}
И затем я запускаю приложение через скрипт npm в моем package.json, который выглядит так:
"start": "webpack-dev-server --open --mode development"
Поэтому, когда я перехожу к localhost: 5000 / accountSetup / 123, я получаю следующую ошибку в консоли:
Я также пытался служить этому сhttp-server-spa
пакет и заметил следующий журнал при навигации:
[OK] Serving static files from ./dist
[OK] Using the fallback file index.html
[OK] Listening on http://localhost:8080
----------------------------------------------
[OK] GET /accountSetup
[OK] GET /bundle.js
[OK] GET /accountSetup/123
[ER] GET /accountSetup/bundle.js
Похоже, что он добавляет префикс в URL-адресе последнего параметра маршрута к загрузке маршрута bundle.js. Таким образом, вы можете видеть, когда я перешел к accountSetup, он просто ссылался на bundle.js, потому что это последний сегмент в URL. Но когда я добавляю несколько сегментов, кажется, что предыдущие сегменты добавляются от localhost к последнему сегменту, к пути bundle.js
РЕДАКТИРОВАТЬ:
Кажется, что-то в отношении BrowserRouter с использованием динамической маршрутизации против HashRouter с использованием статической маршрутизации.
Это мои полные файлы package.json и webpack.config.js
package.json:
{
"name": "react-webpack4-typescript-skeleton",
"version": "1.0.0",
"description": "React application using Webpack 4 and Typescript",
"main": "index.tsx",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"prestart": "npm run test",
"build:prod": "webpack --mode production --config webpack.config.js",
"lint": "tslint 'src/**/*.{ts,tsx}'",
"test": "jest",
"pretest": "npm run lint",
"build:docker": "docker-compose up --build -d"
},
"keywords": [
"React",
"Webpack 4",
"Typescript"
],
"author": "Shawn Choleva",
"license": "MIT",
"devDependencies": {
"@types/jest": "^22.2.2",
"@types/react": "^16.0.41",
"@types/react-dom": "^16.0.4",
"@types/react-redux": "^5.0.15",
"@types/react-router-dom": "^4.2.5",
"@types/redux": "^3.6.0",
"@types/webpack": "^4.1.2",
"@types/webpack-dev-server": "^2.9.4",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"jest": "^22.4.3",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"ts-jest": "^22.4.2",
"ts-loader": "^4.1.0",
"tslint": "^5.9.1",
"tslint-react": "^3.5.1",
"typescript": "^2.7.2",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"less": "^3.0.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: "less-loader"
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:'url-loader'
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: 'images/[hash]-[name].[ext]',
},
}
]
}
]
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Application Name',
template: path.join(__dirname, 'src/index.html')
})
],
devtool: 'inline-source-map',
devServer: {
compress: true,
port: 8080,
historyApiFallback: true,
contentBase: path.resolve(__dirname),
publicPath: '/',
}
};
module.exports = config;