import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './history';
import Login from './components/Login';
import Home from './components/Home';
import NotFound from './presentation/NotFound';
import MainContent from './components/MainContent';
import Overview from './components/Overview';
export default () => {
return(
<Router history ={history}>
<Switch>
<Route path="/" component={Login} exact />
<Home>
<Route path="/main" exact component={MainContent} />
<Route path="/admin/:id" exact component={Overview} />
</Home>
<Route component={ NotFound } />
</Switch>
</Router>
);
}
моя конфигурация веб-пакета
const path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',test: /\.js$/,exclude: /node_modules/},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}, {
test: /\.(png|jpg|gif)$/,
use: [
'file-loader',
],
},{
test: /\.svg$/,
use: ['@svgr/webpack'],
}, {
test: /\.ttf$/,
loader: "file-loader?limit=10000"
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
__CLIENT__: JSON.stringify(true),
__DEVELOPMENT__: true,
__DEVTOOLS__: true
}),
],
optimization:{}
};
Поэтому, когда я приземляюсь на /main, то есть компонент MainContent, он отображает ViewComponent, который отображает список администраторов и по щелчку на отдельном элементе список дает подробный вид этого элемента на маршруте /admin/:id, который работает нормально.
, но если я переосмыслил sh или нажал URL-адрес непосредственно из адресной строки, сетевой запрос шрифтов и изображений, которые изначально обрабатывались из localhost:8080/somerandomid.ttf, теперь извлекаются из localhost:8080/admin/somerandomid.ttf выдает ошибку 400 неверный запрос и стили меняются.
Кто-нибудь может подсказать, как исправить эту ошибку. я вызываю функцию и передаю идентификатор по щелчку элемента из списка.
this.props.history.pu sh ('/ admin /' + id);
и ViewComponent, который отображает список администраторов, подключен как export default withRouter(ViewComponent);, чтобы получить this.props.history.pu sh.
То же самое относится и к URL изображения. localhost: 8080 / otherandomid.png заменен и попытался получить> от localhost: 8080 / admin / otherandomid.png и выдает ошибку 400 неверных запросов без отображения изображения.