如何重定向页面而不刷新添加到网站的反应？答案

【问题标题】：How to redirect page without refreshing on react added to a website?如何重定向页面而不刷新添加到网站的反应？
【发布时间】：2021-03-29 15:45:45
【问题描述】：

我正在按照https://reactjs.org/docs/add-react-to-a-website.html 中的步骤进行操作，我使用脚本标签来添加反应 js。我也跑 npx babel --watch src/jsx/ --out-dir src/ui/js --presets react-app/prod 能够使用 JSX 语法。

我目前正在使用window.location.href 进行重定向，但页面正在刷新。

所以我尝试通过<script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script> 使用 ReactRouter，但没有找到 ReactRouterDOM.Link。

如何重定向页面而不刷新添加到网站的反应？

【问题讨论】：

使用带有钩子useHistory的反应路由器，例如：const history = useHistory();然后history.push('your/route')React Router Documentation
按照this answer 中的说明尝试。确保包含 React、React DOM 和 React Router DOM，（以及 babel，如果你正在使用）cdns。
我使用了 ReactRouter，但收到 Invalid hook call 错误。

标签： javascript reactjs react-router

【解决方案1】：

如果我在 html 页面上添加了这个脚本标签， <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>

我现在可以访问这些对象了，

const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;
const Switch = ReactRouterDOM.Switch;
const Router = ReactRouterDOM.BrowserRouter;

【讨论】：