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

Question

索引.jsx

import 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"));

应用程序.jsx

import 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;

搜索结果.jsx

import 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&nbsp;://github.com/ReactTraining/history#documentation v5 is used with react-router v6。为了解决这个问题，我安装了 history v4:yarn add history@^4或npm i history@^4.