this.props.history后路径发生变化了，但内容没有变化

[ye-carol]

#12 (comment)
我按照这个配置页面可以使用Link了，但this.props.history后路径发生变化了，但内容没有变化

如果是这样嵌套的话this.history.props是有效的，但页面使用Link报错

[ShenChang618]

@ye-carol 可以发一份 DEMO 给我吗？我来找下原因😁

[NARUTOne]

通过link点击可以跳转，但是遇到多级菜单，出现图三问题

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {
  Switch,
  Route,
  Link,
  BrowserRouter as Router,
} from 'react-router-dom';
import {Provider, KeepAlive} from '../../es';
import A from './views/A';
import B from './views/B';
import C from './views/C';
import D from './views/D';

function App() {
  const [toggle, setToggle] = useState(true);
  return (
    <div>
      <ul>
        <li>
          <Link to="/a">a</Link>
        </li>        
        <li onClick={() => setToggle(true)}>
          <Link to="/b">b</Link>
        </li>
        <li onClick={() => setToggle(false)}>
          <Link to="/c">c</Link>
        </li>
        <li>
          <Link to="/d/1">d1</Link>
        </li>
        <li>
          <Link to="/d/2">d2</Link>
        </li>
      </ul>

      <div>
        <button onClick={() => setToggle(!toggle)}>toggle({toggle.toString()})</button>
      </div>

      <Switch>
        <Route
          path="/a"
          render={() => (
            <KeepAlive name="A" >
              <A />
            </KeepAlive>
          )}
        />
        <Route
          path="/b"
          render={() => (
            <KeepAlive name="B" disabled={!toggle}><B /><B /></KeepAlive>
          )}
        />
        <Route
          path="/c"
          render={() => (
            <KeepAlive name="C">
              <C />
            </KeepAlive>
          )}
        />
        <Route
          path="/d/1"
          exact
          render={() => (
            <KeepAlive name="D1">
              <D />
            </KeepAlive>
          )}
        />
        <Route
          path="/d/2"
          exact
          render={() => (
            <KeepAlive name="D2">
              <D />
            </KeepAlive>
          )}
        />
      </Switch>
    </div>
  );
}

ReactDOM.render(
  (
    
      <Router>
        <Provider include={/D\d/}><App /></Provider>        
      </Router>
    
  ),
  document.getElementById('root')
);

[NARUTOne]

看了半天，没看出问题，大神给看看呗 😢

[ShenChang618]

@NARUTOne 抱歉，这个是我项目 Webpack 少配置了东西

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const ROOT = path.join(__dirname, 'demo');
const SRC = path.join(ROOT, 'src');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    index: path.join(SRC, 'index.js'),
  },
  output: {
    path: path.join(ROOT, 'build'),
    filename: 'static/[name].js',
    // 需要配置公共路径
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: true,
      template: path.join(ROOT, 'index.html'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: SRC,
      },
    ],
  },
};