如何解决我在使用重定向和链接更改我的反应路线时遇到困难
index.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"));
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;
SearchResults.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中键入route / search时,它毫无问题地将我带到正确的页面,但是当我尝试在我的App文件中使用Link或Redirect时,它将更改URL但不加载组件(仅空白页面) 我在控制台中没有收到任何错误。 我是在这里问问题的新手,所以希望我以一种有意义的方式提出这个问题。预先感谢!
解决方法
我最近也遇到了类似的问题,原因是历史记录lib版本,当前历史记录版本是v5,但此处指出:https://github.com/ReactTraining/history#documentation v5与react-router v6一起使用。
要解决此问题,我在历史记录v4中安装了yarn add history@^4
或npm i history@^4
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。