reactjs - React Router url 更新但组件没有

Question

有人请帮忙，我无法在我的代码中发现导致 react-router-dom 无法工作的错误。当我单击任何链接时，URL 会更改，但视图不会。我已经阅读了 40 多个主题并进行了研究，但我无法自己找到我的错误。

App.js 文件

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, Link } from 'react-router-dom';

import Header from '../components/Header.component';

import Contact from '../pages/Contact.page';
import DivineShop from '../pages/DivineShop.page';
import Events from '../pages/Events.page';
import Forums from '../pages/Forums.page';
import Home from '../pages/Home.page';
import Sadhanas from '../pages/Sadhanas.page';


let App = (props) => {
    useEffect(() => {
        document.querySelector('#body').style.backgroundColor = '#eee';
        document.querySelector('#body').style.color = '#444';
        document.querySelector('#body').style.fontFamily = 'aladin';
        document.querySelector('#body').style.fontSize = '18px';
    },[])
    return (
        <>
            <Header />
            <Router>
                <Switch>
                    <Route path='/' exact component={Home} />
                    <Route path='/forums' exact component={Forums} />
                    <Route path='/events' exact component={Events} />
                    <Route path='/sadhanas' exact component={Sadhanas} />
                    <Route path='/divineshop' exact component={DivineShop} />
                    <Route path='/contact' exact component={Contact} />
                    <Redirect to='/'/>
                </Switch>
            </Router>
        </>
    );
}


export default App;

标头组件

import React from 'react';
import styled from 'styled-components';

import Nav from './Nav.component';

const HeroSection = styled.section`
    background-image: url(${props => props.backgroundImage});
    height: 70vh;
    width: 100vw;
`;

const Header = (props) => {
    return (
        <header>
            <Nav />
            <HeroSection backgroundImage={props.backgroundImage}/>
        </header>
    );
}

export default Header

导航组件

import React, { useState } from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import styled from 'styled-components';

import colors from '../configs/colors';
import Logo from '../images/Logo.svg';
import { FaBars } from 'react-icons/fa';
import { GrClose } from "react-icons/gr";

const StyledLink = styled(Link)`
    text-decoration: none;
    margin-bottom: .5em;
    color: ${colors.black};
    padding: .5em;
    transition: all .3s ease-in;
`;

const StyledMenus = () => (
    <Router>
        <>
            <StyledLink to='/'>Home</StyledLink>
            <StyledLink to='/forums'>Forums</StyledLink>
            <StyledLink to='/events'>Events</StyledLink>
            <StyledLink to='/sadhanas'>Sadhanas</StyledLink>
            <StyledLink to='/divineshop'>Divine Shop</StyledLink>
            <StyledLink to='/contact'>Contact</StyledLink>
        </>
    </Router>
);

const MobileNav = styled.nav`
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    aligh-items: flex-start;
    width: 40%;
    position: absolute;
    left: 1em;
    top: 3.5em;
    box-shadow: -5px -5px 5px #f9f9f9, 5px 5px 5px #ccc;
    border-radius: 20px;
    padding: .5em .2em;
    display: ${props => props.visibility ? 'flex' : 'none'};
    @media screen and (min-width: 550px){
        display: none;
    }
    & *:hover {
        padding-left: 2em;
        background: ${colors.chineseYellow};
        color: ${colors.queenBlue};
    }

    & *:first-child {
        border-radius: 10px 10px 0 0;
    }

`;


const HighResNav = styled.nav`
    display: flex;
    flex-direction: row;
    flex: 1 1 70%;
    justify-content: space-evenly;

    @media screen and (max-width: 550px){
        display: none;
    }

    & * {
        border-bottom: 2px solid ${colors.white};
    }
    & *:hover{
        color: ${colors.queenBlue};
        border-bottom-color: ${colors.queenBlue};
    }
`;

const StyledFaBars = styled(FaBars)`
    cursor: pointer;
    font-size: 1.2em;
    flex: 0 0 auto;
    &:hover{
        color: ${colors.queenBlue}
    }

    @media screen and (min-width: 550px){
        display: none;
    }
`;

const StyledGrClose = styled(GrClose)`
    cursor: pointer;
    font-size: 1.2em;
    flex: 0 0 auto;
    &:hover{
        color: ${colors.queenBlue}
    }

    @media screen and (min-width: 550px){
        display: none;
    }
`;

const NavContainer = styled.section`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em 2em;
    justify-content: space-between;
    align-items: center;
`;


const Nav = () => {
    const [mobileMenuVisibility, setMobileMenuVisibility] = useState(false);
    const handleBarClick = () => {
        console.log(mobileMenuVisibility);
        setMobileMenuVisibility(!mobileMenuVisibility);
    }
    return (
        <NavContainer>
            {mobileMenuVisibility ? <StyledGrClose onClick={handleBarClick} /> : <StyledFaBars onClick={handleBarClick} />}
            <img src={Logo} alt="Main-Logo" />
            <HighResNav>
                <StyledMenus />
            </HighResNav>
            <MobileNav visibility={mobileMenuVisibility ? "true" : undefined}>
                <StyledMenus />
            </MobileNav>
        </NavContainer>
    )
}

export default Nav;

每个页面都有这个结构

import React from 'react';
import {withRouter} from 'react-router-dom';
const Contact = () => {
    return (
        <div>
            Hello from contact page
        </div>
    )
}

export default withRouter(Contact);

请帮忙

标签： reactjsreact-reduxreact-routerreact-router-dom

Answer 1

我怀疑问题在于您有两个不同的路由器组件。它们没有以任何方式链接 - 在一个中更改 url 不会将该更改传播到Switch另一个中。从组件中移除第二个路由器，并将StyledMenus组件移动Header到原始路由器中App.js。

<Router>
    <Header />
    <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/forums' exact component={Forums} />
        <Route path='/events' exact component={Events} />
        <Route path='/sadhanas' exact component={Sadhanas} />
        <Route path='/divineshop' exact component={DivineShop} />
        <Route path='/contact' exact component={Contact} />
        <Redirect to='/'/>
    </Switch>
</Router>