如何更改 js react 页面中的内容/组件？

Question

为了澄清我正在处理一个反应页面，该页面将向用户显示将显示在页面上的一段内容。 当用户单击指向他们希望在页面上看到的所述内容的链接时。

页面的结构是这样的。 将有一个特定于页面的导航栏。 导航栏有到组件/内容的链接我也在这个项目中使用样式组件导航栏看起来像这样

servantclassnavbar 文件。

import react from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
//useable react icon
import {FaCaretDown} from 'react-icons/fa'

const Navbarcontainer = styled.ul`
    background: #D3D3D3;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
`


const Dropdownbtn = styled.div`
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
    &:hover{
        color: cyan;
        background: grey;
        transition: ease-in-out 0.5s;
    }
`

const Dropdowncontent = styled.div`
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
`

const Dropdownli = styled.li`
  display: inline-block;
  &:hover {
        color: cyan;
        background: grey;
        transition: ease-in-out 0.4s;
  }
  &:hover ${Dropdowncontent} {
    display: block;
  }
`

const Dropdownnavlinks = styled(Link)`
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  &:hover {
    color: cyan;
    background-color: grey;
    transition: ease-in-out 0.4s;
  }
`

function Servantclassesnavbar(){

    return(
        <>
            <Navbarcontainer>
                <Dropdownli>
                <Dropdownbtn>
                    Knight Classes<FaCaretDown />
                </Dropdownbtn>
                    <Dropdowncontent>
                        <Dropdownnavlinks to="/saberclass">Saber</Dropdownnavlinks>
                        <Dropdownnavlinks to="/archerclass">Archer</Dropdownnavlinks>
                        <Dropdownnavlinks to="/lancerclass">Lancer</Dropdownnavlinks>
                    </Dropdowncontent>
                </Dropdownli>
            </Navbarcontainer>
        </>
    )
}

export default Servantclassesnavbar;

这是一个页面，我想让它作为所有其他组件的主页来显示它们的内容。您可以忽略“导航栏”和“侧边栏”，它们只是到本网站其他页面的导航。

import React,{useState} from "react";
import Navbar from "../componets/navbar";
import Sidebar from "../componets/sideBar";
import styled from "styled-components";
import Servantclassesnavbar from "../servantclassescomponets/servantclassesnavbar";
import Introduction from "../servantclassescomponets/Introduction"
import Saberclass from '../servantclassescomponets/Saberclass'
import Lancerclass from '../servantclassescomponets/Lancerclass'
import Archerclass from "../servantclassescomponets/Archerclass"

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 const Displayedserventclasscontainer = styled.div`
    border: 1px solid black;
    margin: auto;
    width: 95vw;
    height: 280vw;
    background: rgb(130,141,162);
    background: linear-gradient(274deg, rgba(130,141,162,0.938813025210084) 0%, rgba(66,116,150,0.6306897759103641) 50%, rgba(132,152,187,1) 100%);

    @media screen and (max-width: 1024px){
        min-height: 100vh;
    }
    @media screen and (max-width: 768px){
        min-height: 230vh;
    }
    @media screen and (max-width: 540px){
        min-height: 320vh;
    }
    @media screen and (max-width: 414px){
        min-height: 350vh;
    }
    @media screen and (max-width: 375px){
        min-height: 415vh;
    }
    @media screen and (max-width: 360px){
        min-height: 450vh;
    }

    @media screen and (max-width: 320px){
        min-height: 530vh;
    }
 
 `;

function Servantclasses (){
    const [isOpen, SetIsOpen] = useState(false);

    function toggle (){
        SetIsOpen(!isOpen)
    }



    return(
        <>
        <Navbar toggle={toggle}/>
        <Sidebar isOpen={isOpen} toggle={toggle}/>
        <Servantclassesnavbar />
        <Displayedserventclasscontainer>
            <Router>
                <Switch>
                    <Route path="/" component={Introduction} />
                    <Route path="/saberclass" component={Saberclass} />
                    <Route path="/lancerclass" component={Lancerclass} />
                    <Route path="/archerclass" component={Archerclass} />
                </Switch>
            </Router>
        </Displayedserventclasscontainer>
        </>
    )

}

export default Servantclasses;

最后这里是我试图在页面上显示的组件/内容的示例。

import react from 'react'
import styled from 'styled-components'
import sabercard from '../assets/sabercard.png'
const Maincontainer = styled.div`
    margin: auto;
    width: 75vw;
    height: 275vw;
    text-align: center;
`
const Classnameheader = styled.h1`
    margin-bottom: 2%;
    font-size: 2.5rem;
    border-bottom: 3px solid black;

`

const Classcardimg = styled.div`
    display: flex;
    justify-content: center;
    border-bottom: 3px solid black;

    > img {
        width: 15vw;
        height: 30vw;
    }
`
const Loreheadercontainer = styled.h2`
    font-size: 2rem;
    border-bottom: 3px solid black;
`
const Classlorecontainer = styled.div`
    font-size: larger;

`
       <Maincontainer>
            <Classnameheader>Saber</Classnameheader>
            <Classcardimg><img src={sabercard} alt="The Servant class card image" /></Classcardimg>
            <Loreheadercontainer>Saber Lore</Loreheadercontainer>
            <Classlorecontainer>Servants that are placed in this class are legendary figures who took up the sword in their life. 
                some are known for choosing to master their swordsmanship. others only used it briefly, but they are a Saber all the same.</Classlorecontainer>

起初，我尝试使用 react-router，正如您在包含所有内容的页面文件中看到的那样，那时我意识到 react-router 更改了整个页面，留下了一个空白页面。 我将如何做到这一点，当我单击页面“Displayedserventclasscontainer”中内容的链接时，将仅显示用户希望在该页面中看到的内容？

Answer 1

由于Servantclassesnavbar使用Link组件，它应该在Router组件内部，如下所示：

return(
  <Router>
    <Navbar toggle={toggle}/>
    <Sidebar isOpen={isOpen} toggle={toggle}/>
    <Servantclassesnavbar />
    <Displayedserventclasscontainer>
      <Switch>
        <Route path="/" component={Introduction} />
        <Route path="/saberclass" component={Saberclass} />
        <Route path="/lancerclass" component={Lancerclass} />
        <Route path="/archerclass" component={Archerclass} />
      </Switch>
    </Displayedserventclasscontainer>
  </Router>
)

并且在Switch之外使用的任何组件都会显示在所有页面上，我认为这就是您要实现的目标。