Javascript React router-在我刷新浏览器之前，页面不会呈现

我曾尝试将我的组件进一步解耦，但我遇到了这个奇怪的错误。我模糊了其他的一般意义。所有组件正确导入并工作

发生的情况是，我降落在“/”上，然后单击一个按钮导航到仪表板，这是一个空白页面（URL确实发生了变化）。然后，我在浏览器中点击“刷新”，显示正确的组件。如果我回到我的登录页，这种情况也会发生；在我刷新之前它是空白的

在我的应用程序组件中

import history from './services/history';
import Routes from './routes';

function App() {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );

最后是我的路线：

import Landing from "../pages/landing/landing.page"
import Dashboard from "../pages/dashboard/dashboard.page.jsx"

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Landing}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>
  );

从“./pages/Landing/Landing.page”导入登录
从“./pages/Dashboard/Dashboard.page.jsx”导入仪表板
导出默认函数路由（）{
返回(
);

这是我的登录页，我单击按钮导航到“/仪表板”

从“react router dom”导入{Link}；
函数着陆（）{
返回(
设置测试
) 
}
导出默认着陆；

看起来您现在使用的是

react Router dom

中的

Router

。据我所知，您必须在浏览器使用方面导入

BrowserRouter

。因此，您的代码如下所示：

从“react router dom”导入{BrowserRouter}；
函数App（）{
返回(
);
}

import Landing from "../pages/landing/landing.page"
import Dashboard from "../pages/dashboard/dashboard.page.jsx"

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Landing}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>
  );

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

function Landing () {
  return (
    <div class="landing-container">
      <Link to="/dashboard"><button> Setup Tests </button></Link>

    </div>
  ) 
}

export default Landing;