BrowserRouter 与 HashRouter

Question

下面是我的router.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { PageSignUp, PageSignIn, PageForgotPsd, PageResetPsd, NotFound } from 'apps/pagesh/';

const RouterAuth = () => {
  return (
    <Router>
      <Switch>
        <Route path='/' component={PageSignUp} exact/>
        <Route path='/signin' component={PageSignIn}/>
        <Route path='/forgot-password' component={PageForgotPsd}/>
        <Route path='/password-reset' component={PageResetPsd}/>
        <Route component={NotFound} />
      </Switch>
    </Router>
  )
}

export default RouterAuth;

当我使用道具“exact”时，所有路径都指向“NotFound”组件当我删除道具“exact”时，所有路径都指向'PageSignUp' 组件。路径没有导航到它们各自的组件。我无法确定确切的问题。看起来很奇怪。请帮忙。下面是我的 webpack 配置文件和 package.json 文件。

Webpack 配置

webpack: {
    mode: 'development',
    entry: {
      'auth.min.js': resolve(`common/src/${assetsdir}/scripts/auth.js`),
      'all.min.js': resolve(`${source}/${assetsdir}/scripts/site.js`),
    },
    output: {
      path: resolve(`${destination}/${assetsdir}/scripts/`),
      filename: '[name]'
    },
    module: {
      rules: [{
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /es5-shim/,
        query: {
          plugins: ['react-require'],
          presets: ['@babel/preset-react', '@babel/preset-env'],
          env: {
            development: {
              plugins: [
                ['react-transform', {
                  transforms: [{
                    transform: 'react-transform-catch-errors',
                    imports: ['react', 'redbox-react']
                  }]
                }]
              ]
            }
          },
          compact: false
        }
      }]
    },
    optimization: {
      minimize: true
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }),
      new webpack.DefinePlugin({
        'process.version': version,
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
        }
      }),
    ],
    resolve: {
      modules: [ resolve(__dirname), './', 'node_modules' ],
      alias: {
        'apps': resolve('common/apps'),
        'common': resolve(`common/${assetsdir}/scripts`),
        'settings': resolve(`${sitedir}/data/settings.json`),
        'jquery': resolve('node_modules/jquery/dist/jquery.min'),
        'bootstrap': resolve('node_modules/bootstrap-sass/assets/javascripts/bootstrap/')
      }
    }
  }

Package.json

{
  "private": true,
  "name": "sample",
  "version": "0.2.0",
  "description": "metalsmith.js project",
  "main": "build.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development babel-node build.js",
    "build": "cross-env NODE_ENV=production babel-node build.js"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/node": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-react-require": "^3.1.1",
    "babel-plugin-react-transform": "^3.0.0",
    "bootstrap-sass": "3.3.7",
    "cross-env": "^5.0.0",
    "css-loader": "^1.0.1",
    "deepmerge": "^2.0.1",
    "es5-shim": "^4.5.13",
    "eslint": "^4.14.0",
    "eslint-plugin-react": "^7.14.3",
    "fast-image-size": "0.1.3",
    "file-exists": "^2.0.0",
    "jquery": "^1.11.3",
    "jquery.cookie": "^1.4.1",
    "json-loader": "^0.5.7",
    "jstransformer-pug": "^0.2.3",
    "lodash": "^4.17.15",
    "metalsmith": "^2.3.0",
    "metalsmith-autoprefixer": "^1.1.1",
    "metalsmith-copy-assets-540": "^1.0.0",
    "metalsmith-in-place": "^2.0.1",
    "metalsmith-layouts": "^1.8.1",
    "metalsmith-permalinks": "^0.5.0",
    "metalsmith-pug": "^2.0.0",
    "metalsmith-sass": "^1.4.0",
    "metalsmith-serve": "0.0.7",
    "metalsmith-watch": "^1.0.3",
    "minimist": "^1.2.0",
    "modernizr": "^3.3.1",
    "moment": "^2.18.1",
    "pug": "^2.0.4",
    "react": "^16.12.0",
    "react-day-picker": "^6.2.1",
    "react-dom": "^16.12.0",
    "react-input-mask": "^1.2.2",
    "react-router-dom": "^5.1.2",
    "react-transform-catch-errors": "^1.0.2",
    "redbox-react": "^1.5.0",
    "respond.js": "^1.4.2",
    "style-loader": "^0.23.1",
    "uglify-js": "^3.6.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "validator": "^9.4.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "babel-upgrade": "^1.0.1",
    "jquery-ui-sass": "0.0.1",
    "react-redux": "^5.1.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  }
}

Answer 1

试试这个：

<Router>
  <Switch>
    <Route exact path='/' component={PageSignUp} exact/>
    <Route exact path='/signin' component={PageSignIn}/>
    <Route exaxt path='/forgot-password' component={PageForgotPsd}/>
    <Route exact path='/password-reset' component={PageResetPsd}/>
    <Route path="*" component={NotFound} />
  </Switch>
</Router>

Answer 2

只需将 BrowserRouter 更改为 HashRouter。

BrowserRouter 与 HashRouter

BrowserRouter vs HashRouter

reactjs

react-router

react-router-v4

react-router-dom

webpack-4