Question

我的问题是这个...

我有一个index.html文件，其中包含我所有的标准主页内容。我正在使用Webpack。

我有一个不同的“ /features.html”页面，我正在用React路由器实现React。因此，我只对单个功能页面有反应。

我的组件如下所示

export default class MyAccount extends React.Component {
constructor(props){
    super(props);
}

render(){
    return(
        <div>
             <NavLink exact to="/features.html/test">features</NavLink>
             <Switch>
                 <Route exact path="/features.html/test" component={Test} />
            </Switch>
        </div>
        )
    }
}

我正在像这样在webpack中加载html文件

 new HtmlWebpackPlugin({
        template: './src/pug/features.pug',
        filename: "./features.html",
        inject: true,
        alwaysWriteToDisk: true,
    }),

这有效。有点。如果单击导航链接，我将被重定向到localhost:8080/features.html/test

我可以看到我的组件。但是，刷新此页面会将我带回到index.html，并且我再也看不到我的组件。

我的webpack.config中确实设置了historyApiFallback:true。当我尝试点击上面的链接时，删除它会引发错误。

我的公共路径也设置为publicPath:'/'

反正还有刷新让我回到以前的页面吗？

在非索引HTML页面上使用React Router刷新

0 个答案: