有沒有辦法使用 react-router 在新選項卡中顯示單個組件？

Question

我是 React Router 的新手。這是我的 App 組件。 StudentDetail組件包含指向 go 到出勤頁面的鏈接。 這樣做是它呈現出勤組件，但在新選項卡中繼續顯示StudentDetail的內容。 我想要什么：在新標簽中只呈現出勤組件？ 有沒有辦法做到這一點？ 提前致謝。

import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";
import "./App.css";
import Attendance from "./Components/Attendance/Attendance";
import StudentDetail from "./Components/StudentDetail/StudentDetail";

export const StudentContext = createContext();

const StudentData = {
  name: "Faisal Rehman",
  rollNo: "BCSF17M019",
  courses: [
    { courseName: "Computer Architecture", courseAttendance: "" },
    {
      courseName: "Enterprise Application Development",
      courseAttendance: "",
    },
    { courseName: "Computer Vision", courseAttendance: "" },
    { courseName: "Mobile Computing", courseAttendance: "" },
  ],
};

function App() {
  return (
    <Router>
      <div className="App">
        <StudentContext.Provider value={StudentData}>
          <StudentDetail />
          <Switch>
            <Route exact path="/attendance" component={Attendance} />
          </Switch>
        </StudentContext.Provider>
      </div>
    </Router>
  );
}

export { App };

Answer 1

您可以將您的學生詳細信息添加到開關，然后它只會根據 url 渲染一個或另一個組件。 如果您在基地 url /它將顯示StudentDetail並且如果您在另一個選項卡中打開/attendance ，它應該只顯示Attendance 。

<Switch>
    <Route exact path="/" component={StudentDetail} />
    <Route exact path="/attendance" component={Attendance} />
</Switch>

Answer 2

對於默認組件，您可以像這樣添加

<Router>
  <div className="App">
    <StudentContext.Provider value={StudentData}>
      <Switch>
        <Route exact path="/attendance" component={Attendance} />
        <Route path="/">
          <StudentDetail />
        </Route>
      </Switch>
    </StudentContext.Provider>
  </div>
</Router>