为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

交互式爱情 2023-01-06 11:17:21

索引.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 但不会加载该组件(只是一个空白的白页)我在控制台中没有收到任何错误。我不熟悉在这里提问,所以希望我以一种有意义的方式提问。提前致谢!


查看完整描述

1 回答

?
智慧大石

TA贡献1720条经验 获得超3个赞

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

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


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信