React-router 組件不會更新<Link>導航

Question

由於許多其他人遇到了同樣的問題，我正在努力與<Link>元素交互以更改路由並呈現新組件。 我可以在我的 redux 存儲中單擊鏈接和應用程序更改的路徑，但沒有更新任何組件。 我的根組件似乎沒有響應shouldComponentUpdate ，即使 props 正在更改並且完整設置類似於connected-react-router描述它需要的方式。

去測試

示例代碼 (git repo) 是 MVP（最小可行產品） - 它可以輕松復制我所看到的問題。

git clone https://github.com/reZach/electron-webpack-template.git
cd electron-webpack-template
npm i
npm run dev

---

如果您更喜歡查看文件，我在下面包含了必要的文件

索引.js

import React from "react";
import ReactDOM from "react-dom";
import Root from "../app/components/core/root";
import store, { history } from "./redux/store/store";

ReactDOM.render(
    <Root store={store} history={history}></Root>,
    document.getElementById("root")
);

商店.js

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { createBrowserHistory } from "history";
import { routerMiddleware } from "connected-react-router";
import rootReducer from "../reducers/rootReducer";

export const history = createBrowserHistory();

const store = configureStore({
    reducer: rootReducer(history),
    middleware: [...getDefaultMiddleware(), routerMiddleware(history)]
});

export default store;

根.jsx

import React from "react";
import { ConnectedRouter } from "connected-react-router";
import { Provider, connect } from "react-redux";
import Routes from "../core/routes";

class Root extends React.Component {
    render() {
        return (
            <Provider store={this.props.store}>
                <ConnectedRouter history={this.props.history}>
                    <Routes></Routes>
                </ConnectedRouter>
            </Provider>
        );
    }
}

export default Root;

路由.jsx

import React from "react";
import { Switch, Route } from "react-router";
import routes from "../../constants/routes";
import App from "../app/app";
import Page2 from "../page2/page2";

class Routes extends React.Component {    
    render() {
        return (
            <Switch>
                <Route path={routes.ENTRY} component={App}></Route>
                <Route path={routes.MAIN} component={Page2}></Route>
            </Switch>
        );
    }
}

export default Routes;

路由文件

{
    "ENTRY": "/",
    "MAIN": "/main"
}

包.json

{
  "name": "electron-webpack-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm run build-dev-webpack && npm run start-dev-app",
    "build-dev-webpack": "webpack --mode development --config ./app/configs/webpack/webpack.config.js",
    "start-dev-app": "cross-env NODE_ENV=development electron app/main.js",
    "prod": "npm run build-prod-webpack && npm run start-prod-app",
    "build-prod-webpack": "webpack --mode production --config ./app/configs/webpack/webpack.config.js",
    "start-prod-app": "cross-env NODE_ENV=production electron app/main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/reZach/electron-webpack-template.git"
  },
  "keywords": [],
  "author": "",
  "license": "GPL-3.0-only",
  "bugs": {
    "url": "https://github.com/reZach/electron-webpack-template/issues"
  },
  "homepage": "https://github.com/reZach/electron-webpack-template#readme",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-json-strings": "^7.7.4",
    "@babel/plugin-transform-react-jsx": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-loader": "^8.0.6",
    "cross-env": "^6.0.3",
    "csp-html-webpack-plugin": "^3.0.4",
    "devtron": "^1.4.0",
    "electron": "^7.1.7",
    "html-webpack-plugin": "^3.2.0",
    "lockfile-lint": "^3.0.5",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.2.1",
    "connected-react-router": "^6.6.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  }
}

Answer 1

這可能是因為 Entry 路由上沒有“確切”字樣（對於 App 組件）：

<Switch>
   <Route exact path={routes.ENTRY} component={App}></Route>
   <Route path={routes.MAIN} component={Page2}></Route>
</Switch>

Answer 2

這些路由問題的解決方案是添加drazewski建議的exact屬性，另外更改我用於<ConnectedRouter>的歷史對象。 問題是由我使用createBrowserHistory以及我沒有在我的應用程序中使用網絡服務器來托管我的文件的事實引起的。 加載我的應用程序時我的應用程序的默認路徑是file:///C:/...index.html 。 這是應用加載時我在 Redux 商店中查看時的路徑值。

我不得不改為使用createHashHistory ，這在您沒有托管網絡服務器來托管您的應用程序時有效。 默認路徑使用createHashHistory時是/ ，它匹配routes.ENTRY我routes.jsx文件，並讓我可以導航到/main 。 顯然，除非您的路徑與您在<Route>定義的現有路徑匹配，否則您無法導航到另一條路徑（這就是我在上面描述我的問題時所認為的情況 - 盡管我不知道為什么我的家/page1 組件完全呈現......）。

這里有很好的參考資料，它們為我指明了我必須改變歷史的方向（這里和這里）。 除了這些鏈接之外，這里還有一篇很好的博客文章（鏡像），更詳細地解釋了react-router 的各種類型的歷史記錄。

新路線.jsx

import React from "react";
import { Switch, Route } from "react-router";
import routes from "../../constants/routes";
import App from "../app/app";
import Page2 from "../page2/page2";

class Routes extends React.Component {    
    render() {
        return (
            <Switch>
                <Route exact path={routes.ENTRY} component={App}></Route> <!-- updated -->
                <Route path={routes.MAIN} component={Page2}></Route>
            </Switch>
        );
    }
}

export default Routes;

新商店.js

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { createHashHistory } from "history"; // < updated!
import { routerMiddleware } from "connected-react-router";
import rootReducer from "../reducers/rootReducer";

export const history = createHashHistory(); // < updated!

const store = configureStore({
    reducer: rootReducer(history),
    middleware: [...getDefaultMiddleware(), routerMiddleware(history)]
});

export default store;