我在使用重定向和链接更改我的 React 路由时遇到困难

Question

索引.jsximport React from "react";import ReactDOM from "react-dom";import { Route, Router, Switch } from "react-router-dom";import App from "./components/App.jsx";import SearchResults from "./components/SearchResults.jsx";import history from "./history.js";import SearchProvider from "./context/SearchContext.jsx";const routing = (  <Router history={history}>    <div>      <Switch>        <SearchProvider>          <Route path="/search" component={SearchResults} />          <Route exact path="/" component={App} />        </SearchProvider>      </Switch>    </div>  </Router>);ReactDOM.render(routing, document.getElementById("app"));应用程序.jsximport React, { useState } from "react";import styles from "../modules/app.module.css";import Search from "./Search.jsx";import { Link } from "react-router-dom";const App = (props) => {  return (    <div className={styles.appContainer}>      <div className={styles.title}>BGrules</div>      <Search />      <Link to="/search">        <button>Click me</button>      </Link>    </div>  );};export default App;搜索结果.jsximport React from "react";import styles from "../modules/searchResults.module.css";const SearchResults = (props) => {  return (    <div className={styles.resultContainer}>      <div className={styles.title}>Search Results</div>      <div className={styles.subTitle}>results for term:</div>    </div>  );};export default SearchResults;我遇到的问题是，当我在 url 中键入路由 /search 时，它会毫无问题地将我带到正确的页面，但是当我尝试在我的 App 文件中使用 Link 或 Redirect 时，它会更改 url 但不会加载该组件（只是一个空白的白页）我在控制台中没有收到任何错误。我不熟悉在这里提问，所以希望我以一种有意义的方式提问。提前致谢！

Answer 1

我最近遇到了类似的问题，原因是 history lib 版本，当前版本的 history 是 v5，但正如这里指出的：https ://github.com/ReactTraining/history#documentation v5 is used with react-router v6。

为了解决这个问题，我安装了 history v4:yarn add history@^4或npm i history@^4.