学生名单点击并重定向到页面反应

Question

我有一个学生列表作为导航栏（它不是一个导航栏，只是一个列表），我想点击一个学生链接，并且只被重定向到学生页面，没有学生列表可见。

单击学生 => 使用学生姓名重定向到 Pupil.jsx，但没有显示学生列表。如果它是一个博客列表，例如点击博客 => 重定向到 Blog.jsx

我尝试过使用 const history = useHistory() 和 ``history.push(/pupil/${student}}`。它所做的只是更改 URL，而不是重定向或呈现 Pupil.jsx 页面。

如果有任何帮助，我将不胜感激。

我拥有的是

Home
Contact

Students
 o Levi
 o Mikasa
 o Eren

 This is Pupil Page
 Student: Eren

我想要的是：

Home
Contact

This is Pupil Page
Student: Eren

我的 JSX 文件：StudentRoom、Home/Contact、Navbar、Pupil

StudentRoom.jsx

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

const StudentRoom = props => {
    
    const students = ["eren", "levi", "mikasa", "armin", "erwin"];
    
    const studentPage = (student) => {
        
        console.log(student);
        console.log("Student page");
        setStudentName(student);
        
    }

    return (

      
        <div>
            
            <ul>
            <Router>
              
            {students.map((student, i) => (
    
                    <React.Fragment key={i}>
                        
                <Link to={`/pupil/${student}`} onClick={() => studentPage(student)}>
                <li>{student}</li>
                </Link>
                </React.Fragment>
    
                )
              )}
    
                {students.map((student, i) => (
                    
                    <React.Fragment key={i}>
                    <Redirect to={`/pupil/${student}`}/>
                    <Switch>
                    <Route exact path={`/pupil/${student}`}>
                        <Pupil name={student}/>
                    </Route>
                </Switch>
                        </React.Fragment>
                    )
                              
                  )}
            </Router>
            </ul>
        </div>
    
    );
    
};

export default StudentRoom;

瞳孔.jsx

import React from "react";

const Pupil = (props) => {
    return (
        <div>
            <h4>Pupil page</h4>
            <h4>Student: {props.name}</h4>
        </div>
    );
};
export default Pupil;

Navbar.jsx

import React from "react";
import {Link, Switch, Route, BrowserRouter as Router} from "react-router-dom";
import Home from "../pages/Home";
import Contact from "../pages/Contact";
import StudentRoom from "../pages/StudentRoom";
import Pupil from "../pages/Pupil";

function Navbar(){

    return (
    <div>
     <Router>
    <ul id="navbar-ul">
        <Link to="/">
            <li className="navbar-li">Home</li>
        </Link>
 
        <Link to="/contact">
            <li className="navbar-li">Contact</li>
        </Link>
        
          <Link to="/students">
            <li className="navbar-li">Students</li>
        </Link>
            </ul>
        
        <Switch>
            <Route exact path ="/" component={Home}/>
            <Route exact path ="/contact" component={Contact}/>
      
             <Route exact path ="/students" component={StudentRoom}/>
            <Route path="/pupil" component={Pupil}/>
        </Switch>
        </Router>
    </div>
    );
};

export default Navbar;

Home.jsx 和 Contact.jsx 基本相同。

import React from "react";
const Home = props => {
    
    return (
    <div>
            <h4>This is the Home page</h4>
    </div>
    );
};
export default Home;

Answer 1

请像这样修改您的StudentRoom.jsx 和Pupil.jsx

StudentRoom.jsx

import React, { useState } from "react";
import Pupil from "./Pupil.jsx";
import {
  Link,
  Switch,
  Route,
  BrowserRouter as Router,
  Redirect,
} from "react-router-dom";

const StudentRoom = (props) => {
  const students = ["eren", "levi", "mikasa", "armin", "erwin"];

  const [student, setStudent] = useState(null);

  const studentPage = (student) => {
    console.log("Student page", student);
    setStudent(student);
  };

  return (
    <div>
      <ul>
        <Router>
          {student ? (
            <Link to={`/`} onClick={() => setStudent(null)}> Go back </Link>
          ) : (
            students.map((student, i) => (
              <Link
                key={i}
                to={`/pupil/${student}`}
                onClick={() => studentPage(student)}
              >
                <li>{student}</li>
              </Link>
            ))
          )}

          <Switch>
            <Route path={`/pupil/:name`} component={Pupil} />
          </Switch>
        </Router>
      </ul>
    </div>
  );
};

export default StudentRoom;

Pupil.jsx

import React from "react";
import { useParams } from "react-router-dom";

const Pupil = (props) => {
  const { name } = useParams();
  return (
    <div>
      <h4>Pupil page</h4>
      <h4>Student: {name}</h4>
    </div>
  );
};
export default Pupil;