使用 id 刷新页面时 react-router-dom 错误

Question

我正在使用 React/Redux 和 Node.js 开发一个项目。

我将 react-router-dom 作为依赖添加到我的项目中，并像这样配置路由器：

import ...

const Router = () => (
  <main>
    <Switch>
      <Route exact path='/' component={components.main}/>
      <Route path='/caseDetail/:id' component={components.caseDetail}/>
      <Route component={components.notFound}/>
    </Switch>
  </main>
)

export default Router

然后像这样设置我的 webpack

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const env = require('./src/env.js')
const TARGET = process.env.npm_lifecycle_event
process.env.BABEL_ENV = TARGET

const PATHS = {
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, 'build'),
  assets: path.join(__dirname, 'assets')
}

const common = {
  entry: [PATHS.app],
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: PATHS.app,
        loaders: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true } }],
        include: /flexboxgrid/
      },
      {
        test: /\.scss$/,
        exclude: /flexboxgrid/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } },
          'sass-loader'
        ]
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$/i,
        loader: 'url-loader?name=[name].[ext]'
      },
      {
        test: /\.otf$|\.eot$|\.svg$|\.ttf|\.woff|\.woff2$/,
        loader: 'url-loader?name=[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', path.resolve(__dirname, './node_modules')],
    mainFields: ['browser', 'web', 'browserify', 'main', 'style']
  }
}

if (TARGET === 'start' || !TARGET) {
  module.exports = merge(common, {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: ['source-map-loader'],
          enforce: 'pre'
        }
      ]
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: PATHS.build,
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
      stats: 'errors-only',
      https: true,
      host: env.host,
      port: env.port,
      overlay: {
        errors: true
      },
      watchOptions: {
        watch: true
      }
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'assets/style.css' }),
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
        template: PATHS.app + '/index.html',
        inject: 'body'
      })
    ],
    output: {
      path: PATHS.build,
      filename: 'bundle.js'
    }
  })
}

if (TARGET === 'production') {
  module.exports = merge(common, {
    plugins: [
      new MiniCssExtractPlugin({ filename: 'style.css' }),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: "'production'"
        }
      })
    ],
    output: {
      path: '/build',
      filename: 'bundle.js'
    }
  })
}

我的问题是

当我调用此路由 /caseDetail/1 时，它通过使用 Link:

来工作

<Link to={{ pathname: `/caseDetail/` + caseStudy.id }}>

BUT，如果我直接通过浏览器调用，比如https://localhost:3000/caseDetail/1

它失败了，我在控制台上收到这条消息

Refused to apply style from 'https://localhost:3000/caseDetail/assets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
0:12 GET https://localhost:3000/caseDetail/bundle.js net::ERR_ABORTED 404
0:1 Refused to execute script from 'https://localhost:3000/caseDetail/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

已解决

如何修复。感谢@soroush-chehresa

我将 BrowserRouter 添加到我的 router 文件中：

import React from 'react'
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { components } from './loader'

const Router = () => (
  <main>
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={components.main}/>
        <Route exact path='/caseDetail' component={components.caseDetail}/>
        <Route path='/caseDetail/:id' component={components.caseDetail}/>
        <Route component={components.notFound}/>
      </Switch>
    </BrowserRouter>
  </main>
)

export default Router

并且还在 output

上添加到我的 webpack.config.js

  publicPath: '/'

Answer 1

如果您使用 react-router-redux 将 Router 换成 ConnectedRouter:

  import { ConnectedRouter } from 'react-router-redux';
  import { createBrowserHistory } from 'history';

  const Router = () => (
    <main>
      <ConnectedRouter history={createBrowserHistory()}>
        <Switch>
          <Route exact path='/' component={components.main}/>
          <Route path='/caseDetail/:id' component= {components.caseDetail}/>
         <Route component={components.notFound}/>
       </Switch>
      </ConnectedRouter>
    </main>
  );

否则，如果您使用 react-router-dom 将 Router 换成 BrowserRouter:

  import { BrowserRouter } from 'react-router-dom';

  const Router = () => (
    <main>
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={components.main}/>
          <Route path='/caseDetail/:id' component={components.caseDetail}/>
          <Route component={components.notFound}/>
        </Switch>
      </BrowserRouter>
    </main>
  );

使用 id 刷新页面时 react-router-dom 错误

react-router-dom error when refreshing page with id

javascript

router

reactjs

webpack

react-router-dom

已解决