Я довольно новичок в реагировании и веб-упаковке, и я пытаюсь использовать реактив-маршрутизатор-дом для маршрутизации в своем веб-приложении.
Но что-то странное происходит, когда я определил путь для моего компонента к '/: guid', все работает нормально, но если я установил его на '/ users /: guid', я получаю пустую страницу, когда обновляю стр.
Я прочитал несколько постов, в которых говорится, что в мой webpack.config.js добавлено «publicPath» и «historyApiFallback: true», но по какой-то причине он все еще не работает. хотя перед добавлением я получил ошибку «не могу получить URL».
Router.js:
import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import UserInfo from '../Containers/UserInfo/UserInfo';
import Main from './Main/Main';
const Router = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Main} />
<Route path='/users/:guid' component={UserInfo} />
</Switch>
</BrowserRouter>
);
};
export default Router;
webpack.config.js:
const path = require('path');
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');
const config = {
entry: `${SRC_DIR}/app/index.js`,
output: {
path: `${DIST_DIR}/`,
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.js?$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
historyApiFallback: true
}
};
module.exports = config;