reactjs - React router dom不适用于Link，但刷新页面会加载组件

问题描述

我有一个带有几条路线的 create-react-app。时不时地，当我更改分支等时，我注意到路由不起作用。我认为它唯一一次工作是因为缓存。

下面是我的路线，为了简单起见，我blog用一个简单的p标签替换了路线，因为我开始认为它与我链接到的组件有关。

应用程序.tsx

const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
   <Switch>
      <Route exact path="/" component={Main} />
      <Route path="/blog">
         <p>test</p>
      </Route>
   </Switch
</Router>

主要.tsx

import React from "react";
import { Link } from "react-router-dom";

export const Main = () => {

    return (
        <Link to="/blog">Blog</Link>
    )
}

这是发生的事情：

单击 Main 中的博客链接 = 浏览器中的路由更改为 localhost:9600/blog 但没有内容，只有一个白页
在 localhost:9600/blog 上刷新页面，您将获得该<p>test</p>部分

但是为什么单击链接后它不显示测试？

我正在使用的版本：

反应路由器 dom：“^5.2.0”
反应脚本：“4.0.1”
反应：“^17.0.1”
历史：“^5.0.0”

有任何想法吗？

标签： reactjscreate-react-appreact-router-dom

为了让 React-Router-Dom 工作得很好，请确保您的整个应用程序都使用 BrowserRouter 包装，这在您的indexJS 中是最好的，如下所示，indexJS 文件的示例

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

reactjs - React router dom不适用于Link，但刷新页面会加载组件

问题描述

解决方案

推荐阅读