Question

am尝试为我的应用设置路由器，并使基本家庭路由入口点正常工作（貌似）。看来当我尝试开始添加子路由时，它正在中断。我现在有一个非常简单的设置。但是我的路线不在工作中，有人可以帮忙吗？谢谢

import ReactDOM from 'react-dom';
import Home from './src/Home';
import React, { Component } from 'react';

import Help from './src/Home/Help';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
const About = () => <h1>About Us</h1>

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </Router>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

// webpack.config.js

module.exports = function(webpackConfig) {
  webpackConfig.babel.plugins.push('transform-runtime');
  webpackConfig.babel.plugins.push(['import', {
    libraryName: 'antd',
    style: 'css',
  }]);

  return webpackConfig;
};

Answer 1

如果仅在localhost上运行时遇到此问题，则这是问题所在：

您需要将historyApiFallback: true添加到Webpack配置中。

因此，将您的webpack.config.js更新为以下内容：

module.exports = function(webpackConfig) {
  webpackConfig.babel.plugins.push('transform-runtime');
  webpackConfig.babel.plugins.push(['import', {
    libraryName: 'antd',
    style: 'css',
  }]);
  webpackConfig.historyApiFallback = true;

  return webpackConfig;
};

这应该可以解决问题！

反应路由器不能与webpack dora一起使用？

1 个答案: