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

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>&nbsp; &nbsp; <Route exact path="/" component={StudentDetail} />&nbsp; &nbsp; <Route exact path="/attendance" component={Attendance} /></Switch>

Answer 2

对于默认组件，您可以像这样添加<Router>&nbsp; <div className="App">&nbsp; &nbsp; <StudentContext.Provider value={StudentData}>&nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; <Route exact path="/attendance" component={Attendance} />&nbsp; &nbsp; &nbsp; &nbsp; <Route path="/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StudentDetail />&nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; </StudentContext.Provider>&nbsp; </div></Router>