Question

我遇到以下问题：React路由器无法正常工作。无论我是重新加载页面还是链接到路由，它都无法正常工作。在重新加载时，我得到一个白页和链接，除了URL更改之外没有任何事情发生。奇怪的是，当我更改定义路径的源文件（App.js）时，我可以让它显示正确的组件。我正在使用WebpackDevServer，所以我虽然问题在那里，但我已经尝试了在网上找到的所有解决方案，但没有任何作用。帮助？！？

devserver.js：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var server = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
})

server.listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

App.js：

@observer
export default class App extends Component {

constructor(props) {
    super(props)
    this.stores = this.props.stores
    this.history = this.props.history
}

componentDidMount() {
    this.authenticate()
}

authenticate(e) {
    if (e) e.preventDefault()
    this.props.stores.appState.authenticate()
}

render() {
    return (
        <MuiThemeProvider>
            <Router history={this.history}>
                <Provider {...this.stores}>
                    <div className="wrapper">
                        {/*<DevTools />*/}

                        <TopBar />

                        <Route
                            exact
                            path="/"
                            render={(props) => <LazyRoute {...props} component={import('./Home')}/>}
                        />

                        <Route
                            path="library"
                            render={(props) => <LazyRoute {...props} component={import('./Library')}/>}
                        />

                    </div>
                </Provider>
            </Router>
        </MuiThemeProvider>
    )
}
}

即使设置了historyApiFallback，React路由器也无法正常工作

0 个答案: