如何使用反应路由器 dom v4 配置 webpack 开发服务器？

Posted 2023-02-16

【中文标题】如何使用反应路由器 dom v4 配置 webpack 开发服务器？

【英文标题】：How to configure webpack dev server with react router dom v4?

【发布时间】：2017-12-01 23:59:34

【问题描述】：

这是我的 webpack 配置代码：

const compiler = webpack(
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: 
    loaders: [
      
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      ,
    ],
  ,
  output: filename: 'app.js', path: '/', 
);

const app = new WebpackDevServer(compiler, 
  contentBase: '/public/', 
  proxy: '/graphql': `http://localhost:$GRAPHQL_PORT`,
  publicPath: '/js/',
  stats: colors: true, 
);

app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常，应用程序在 localhost:3000/index.html 上运行，但是当我尝试实现 React Router dom v4 时。它不起作用。这是代码：

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component=App/>
      <Route  path='/about' component=About/>
      </div>
    </BrowserRouter>,
  mountNode
);

这是 localhost:3000/ 上的结果 在 localhost:3000/about 上。我收到一个错误：无法 GET /about 。不是我所期待的，为什么这不会呈现？

关于

【问题讨论】：

你为什么要在你的路由组件周围添加一个额外的<div></div>？您应该将<Switch></Switch> 放在不同的路线周围reacttraining.com/react-router/web/api/Switch

@Bjoern 我尝试了 Switch，但也不起作用。我使用了那个 div，因为路由器只想要一个孩子。

嘿，你找到答案了吗？我也遇到了同样的问题...

【参考方案1】：

我认为这与 webpack-config 无关。 Here 是使用 react-router-4.0 的基本 github 存储库。我在 webpack 配置中创建了这个示例，没有任何与 react-router-4.0 相关的特定更改。

如果尚未在 webpack 配置中添加“devServer”：

devServer: 
    historyApiFallback: true,
  

您的代码中有两个小建议，请尝试使用 'exact' 和 'about' 的路径，即

<Route exact path='/about' component=About/>

并且，为 const 添加括号，即，

const About = () => (<div> <h1>About</h1> </div>);

希望，这可以解决您的问题。如果您需要这方面的任何其他信息，请告诉我。

【讨论】：

不知道historyApiFallback的配置，谢谢分享。

我需要使用 npm start 重新启动我的应用程序

fallback 专门将 404 重定向回您的根目录或索引，让您模仿您可能在 nginx 或 s3 或您的应用部署的其他方式中设置的服务器端渲染或回退。

【参考方案2】：

在我的情况下，我不得不删除代理配置，因为 webpack 服务器需要来自 http://localhost:3001 的响应。

// proxy: 
//   '/': 'http://localhost:3001',
// ,