React 路由器 dom 无法与 Link 一起使用，但刷新页面会加载组件

Question

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

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

App.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>

Main.tsx

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

export const Main = () => {

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

情况如下：

在 Main 中单击 Blog link = 浏览器中的路由更改为 localhost:9600/blog 但是没有内容，只有一个白页
在 localhost:9600/blog 上刷新页面，您会看到 <p>test</p> 部分

但为什么点击 link 后不立即显示测试？

我使用的版本：

react-router-dom: "^5.2.0"
反应脚本：“4.0.1”
反应：“^17.0.1”
历史：“^5.0.0”

有什么想法吗？

Answer 1

为了让 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();

Answer 2

通常当我想在“路由”中渲染一些 JSX 而我不想创建一个不同的组件时，我使用接收函数的“渲染”道具并且应该 return 你的 JSX想要渲染。

试试这个：

<Route path=“/blog” render={() => <p>test</p>} />

Answer 3

在 App.js 中将路由器更改为 BrowserRouter 成功了！

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
...
return (
    <Router history={history} data-test="component-app">
      <Switch>
        <Route exact path="/">
          <Main />
        </Route>
        <Route path="/blog">
          <p>test</p>
        </Route>
      </Switch>
    </Router>
  );

感谢大家的帮助！

Answer 4

感谢这通过将 BrowserRouter 导入为路由器对我有用：

从 'react-router-dom';

导入 { BrowserRouter 作为路由器，路由}

并将 "react-router-dom": "^5.2.0" 更新为 "react-router-dom": "^5.3.0 "

React 路由器 dom 无法与 Link 一起使用，但刷新页面会加载组件

React router dom not working with Link, but refreshing the page loads the component

reactjs

create-react-app

react-router-dom