在React和npm设置中添加全局basename/context

Question

我的url有问题，我需要不是从localhost:8081而是从localhost:8081/admin运行我的应用程序，所以所有页面都显示我404，其中有/。。。。，无论如何，主页面也不太好用，在index.html中我也有标记，文件的例子。

<link href="../public/css_admin/fonts/fonts.css" rel="stylesheet"/>

Webpack配置

var path = require('path');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve('dist'),
publicPath: '/admin/',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.json', '.jsx']
},
.....
devServer: {
contentBase: './',
historyApiFallback: true,
host: 'localhost',
port: 8081
},
externals: {
config: JSON.stringify({
apiUrl: '..../rest/v1'
})
}
}

应用程序路由

render() {
return (
<Router history={history}  basename="admin">
<div>                    
<Switch>
<PrivateRoute exact path="/" component={MainIndexPage} refresh={false} />
<PrivateRoute exact path="/staff" component={StaffPage}  refresh={false}  />
<Route path="/register" component={RegisterPage} />                   
</Switch>
</div>
</Router>
);
}

Answer 1

首先，我是一个初学者。basename="admin"或basename="/admin"。

Answer 2

所以请将basename添加到历史记录中，

export const history = createBrowserHistory({basename: '/admin'});

同时更改

filename: 'bundle.js' -> filename: 'app-[hash].js'