有没有办法使用反应路由器在新选项卡中显示单个组件？

Question

我是 React Router 的新手。这是我的应用程序组件。StudentDetail组件包含转到出勤页面的链接。其作用是呈现出勤组件，但继续在新选项卡中显示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 呈现一个组件或另一个组件。如果您位于基本网址上，/它将显示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>