反应路线正在改变，但 html 在我刷新页面之前不会呈现答案

【问题标题】：react route is changing but html not rendering until i refresh the page反应路线正在改变，但 html 在我刷新页面之前不会呈现
【发布时间】：2020-07-28 17:24:18
【问题描述】：

  import React, { Suspense } from 'react';
  import ReactDOM from 'react-dom';
  import { createBrowserHistory } from "history";
  import { Router, Route, Switch } from "react-router-dom";
  import indexRoutes from "./routes/index";
  import "./index.css";

  var hist = createBrowserHistory();

index.js

  ReactDOM.render(
        <Router history={hist}>
        <Suspense fallback={
        <div></div>}> 
            <Switch>
              {indexRoutes.map((prop, key) => {
                return <Route exact={prop.exact} path={prop.path} key={key} component={prop.component} />;
              })}
            </Switch>
          </Suspense>
        </Router>,
    document.getElementById("root")
  );

routes.js - 下面的数据正在传递给 index.js

  import React from 'react';
  const Home = React.lazy(() => import('../views/Home.view'));
  const Auth = React.lazy(() => import('../views/Auth.view'));
  const Test = React.lazy(() => import('../views/test'));

  var indexRoutes = [
    { exact:false, path: "/test", name: "Test", component: Test },
    { exact:false, path: "/dashboard/", name: "Home", component: Home },
    { exact:true, path: "/", name: "Auth", component: Auth },
  ];

  export default indexRoutes;

数据库.js

在 "/dashboard/" 路线内，我有以下组件。在这里，我为某些组件提供了另一条内部路线。在这里，当我要去不同的路线时，虽然路线正在改变，但 html 不是渲染。但是当我刷新页面时 Databases 组件正在呈现，NewReport 组件即将到来当我要去 /dashboard 路线但 Databases 组件无法在 /dashboard/databases/ 路线上工作时

注意：在刷新页面时数据库组件正在工作

  <BrowserRouter>
  <Switch>
    <Route exact path='/dashboard' component={NewReport} />
    <Route exact path='/dashboard/databases/' component={Databases} />
  </Switch>
  </BrowserRouter>

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

首先你必须在整个应用程序中只使用一个路由器，但你使用的是两个不同的路由器：

路由器 - 在 index.js 中
BrowserRouter - 在 /dashboard 内

您必须删除 BrowserRouter，它可能会修复意外行为

【讨论】：