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

我是 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 };


PIPIONE
浏览 158回答 2
2回答

慕的地8271018

您可以将学生详细信息添加到开关,然后它只会根据 URL 呈现一个组件或另一个组件。如果您位于基本网址上,/它将显示StudentDetail,如果您/attendance在另一个选项卡中打开,它应该只显示Attendance。<Switch>&nbsp; &nbsp; <Route exact path="/" component={StudentDetail} />&nbsp; &nbsp; <Route exact path="/attendance" component={Attendance} /></Switch>

狐的传说

对于默认组件,您可以像这样添加<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>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript