Question

  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;

database.js

我在内部“ /仪表板/” 中包含以下组件。在这里，我为某些组件提供了另一条内部路线。在这里，当我通过转到其他路线时，路线正在更改，但html 没有渲染。但是，当我刷新页面时，数据库组件正在呈现， NewReport 组件即将到来当我要转到/ 仪表板路线但数据库组件在 / dashboard / databases / 路线
上不起作用时
注意：刷新页面上“数据库”组件正在工作

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

Answer 1

首先，您在整个应用中只需要使用一个路由器，但是您要使用两个不同的路由器：

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

您必须删除BrowserRouter，它可能会解决意外行为

反应路线正在更改，但直到刷新页面后HTML才会呈现

1 个答案: