使用嵌套路径 React 时刷新空白页

Question

当我刷新页面或按下浏览器的前后按钮时，我遇到了这个问题（空白页面）。

我正在使用 Firestore 作为我的后端。

我正在使用：

`"firebase": "^8.2.9"`,
`"react": "^17.0.1"`,
`"react-dom": "^17.0.1"`,
`"react-router-dom": "^5.2.0"`

这是我的路线结构：

ROUTES- Panel(Home route-/) -> Account(nested route-/account) -> verification(nested route-/account/verification)

当我从 Panel.js(/) to Account.js(/account) 导航时，它工作正常。

同样，当我从 Account.js(/account) to verification.js(/account/verification) 导航时，它可以工作。

但是当我refresh the browser 或press the browser's back button or forward button 时，空白页是可见的。

示例：如果我在/account/verification 路由中，现在如果我按下浏览器的后退按钮，我应该导航到/account，但空白页可见

Panel.js：

import React from "react";
import fire from "../../Firebase";
import "./Panel.css";
import logo from "../assets/MMF_White.png";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Account from "../Accounts/Accounts";
import Notification from "../Notifications/Notifications";

function Panel() {
  return (
    <Router>
      <div className="app-panel">
        <div className="container">
          <div className="logo-div">
            <img className="logo1" src={logo} />
          </div>
          <div className="panel-button-div">
            <button
              className="panel-button"
              onClick={() => fire.auth().signOut()}
            >
              Sign Out
            </button>
          </div>
        </div>

        <div className="header-div">
          <h1>
            Welcome <span className="wel">Admin</span>
          </h1>
        </div>

        <Switch>
          <Route exact path="/account" component={Account} />
          
        </Switch>

        <div>
          <Link to="/account">Account</Link>
         
        </div>
      </div>
    </Router>
  );
}
export default Panel;

Account.js-

import React from "react";
import Verify from "./Verification/Verification";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

function Account() {
  return (
    <Router>
      <div>
        <Link to="/account/verification">Verification</Link>
      </div>
      <Switch>
        <Route exact path={`/account/:verification`} component={Verify} />
      </Switch>
    </Router>
  );
}

export default Account;

验证.js：

import React, { useContext, useState } from "react";
import UIVerify from "./CardUIVerify";
import { DataContextVerify } from "../../../contexts/Verification/DataVerify";
import "./Verification.css";

function Verify() {
  // const [user, setUser] = useState("");
  const [showdata1, setShowData1, fetchedItem1] = useContext(DataContextVerify);

  function search1(event) {
    if (event.key === "Enter") {
      fetchedItem1();
    }
  }
  return (
    <div className="verification-div">
      <h2 className="v-header">Verification</h2>
      <input
        className="search-1"
        name="search"
        type="text"
        placeholder="Search.."
        autoComplete="off"
        
        onKeyPress={search1}
      />
      <UIVerify />
    </div>
  );
}

export default Verify;

Answer 1

您应该只在应用程序的顶层定义一个 <Router> ... </Router> 组件。删除 <Router> 并将您的 Account.js 文件中的 path={'/account/:verification'} 更改为 path="/account/verification"

import React from "react";
import Verify from "./Verification/Verification";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

function Account() {
  return (
    <div>
      <Link to="/account/verification">Verification</Link>
    </div>
    <Switch>
      <Route path="/account/verification" component={Verify} exact />
    </Switch>
  );
}

export default Account;