javascript - ReactJS - 路由工作但不显示页面

问题描述

我是 ReactJS 的新手，在查看显示时遇到问题。该路线有效，但我需要重新加载页面以显示内容。有没有用户强制重新加载页面以查看内容的任何可能的解决方案。

--App.js

import React from "react";
import {Route} from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import "./App.css";
import Home from "./components";
import Resume from "./components/Resume"

function App() {
  return (
  <>
    <CssBaseline/> 
    <Route exact path="/" component ={Home}/>
    <Route path="/resume" component ={Resume}/>
  </>
  );
}

export default App;

-- 导航栏.js

import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import MobileRightMenuSlider from '@material-ui/core/Drawer';
import {
    AppBar,
    Toolbar,
    ListItem,
    IconButton,
    ListItemText,
    Avatar,
    Divider,
    List,
    Typography,
    Box,
    ListItemIcon
} from "@material-ui/core"
import {
    ArrowBack,
    AssignmentInd,
    Home,
    Apps,
    ContactMail
} from "@material-ui/icons"
import avatar from "../profile_icon_1.png"

// CSS STYLES
const useStyles = makeStyles(theme=>({
    menuSliderContainer: {
        width: 250,
        background: "black",
        height: "100%"
    },
    avatar: {
        display: "block",
        margin: "0.5rem auto",
        width: theme.spacing(13),
        height: theme.spacing(13)
    },
    listItem: {
        color: "cyan"
    }

}));

// Icons

const menuItems = [
    {
        listIcon: <Home/>,
        listText: "Home",
        listPath: "/"
    },
    {
        listIcon: <AssignmentInd/>,
        listText: "Resume",
        listPath: "/resume"
    },
    {
        listIcon: <Apps/>,
        listText: "Portfolio"
    },
    {
        listIcon: <ContactMail/>,
        listText: "Contacts"
    }
]


const Navbar = () => {
    const [state, setState] = useState({
        right: false
 })

const toggleSlider = (slider, open) => () => {
    setState({...state, [slider]: open});
}

    const classes = useStyles()

    const sideList = slider => (

        <Box className={classes.menuSliderContainer} component="div" onClick={toggleSlider(slider,false)}>
            <Avatar className={classes.avatar} src={avatar} alt="Glenn Java" />
            <Divider/>
            <List>
                {menuItems.map((lsItem, key) => (
                    <ListItem button key={key} component={Link} to={lsItem.listPath}>
                        <ListItemIcon className={classes.listItem}>
                            {lsItem.listIcon}
                        </ListItemIcon>
                        <ListItemText className={classes.listItem} primary={lsItem.listText} />
                    </ListItem>
                ))} 
            </List>
        </Box> 
    )
    return (
        <>
            <Box component="nav">
                <AppBar position ="static" style={{background: "#222"}}>
                    <Toolbar>
                        <IconButton onClick={toggleSlider("right", true)}>
                            <ArrowBack style={{color: "tomato"}}/>                    
                        </IconButton>
                        <Typography variant="h5" style={{color:"tan"}}>Portfolio</Typography>
                        <MobileRightMenuSlider anchor="right" open={state.right} onClose={toggleSlider("right", false)}>
                            {sideList("right")}
                        </MobileRightMenuSlider>
                    </Toolbar>
                </AppBar>
            </Box>
        </>

    )
};

export default Navbar

-- 重新加载前点击 Resume Navbar 按钮后，重定向到此页面，但没有内容

-- 重新加载后重新加载页面后，现在显示内容

在 Google Chrome 控制台中找到

标签： javascripthtmlcssreactjs

为了使它工作，你需要把你<Route/>的Switch里面反过来应该放在下面<Router>

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

    <Router>
       <Switch>
           <Route exact path="/" component ={Home}/>
           <Route path="/resume" component ={Resume}/>
        </Switch>
    </Router>

javascript - ReactJS - 路由工作但不显示页面

问题描述

解决方案

推荐阅读