求教:react路由可以正常跳转,跳转之后刷新页面就变成空白

路由:http://localhost:3002/nav
跳转到
路由 http://localhost:3002/exam

可以正常跳转

但是在 http://localhost:3002/exam 页面刷新 或者 F5 页面就空白

http://localhost:3002/nav页面刷新 就没有任何影响

怀疑是路由配置除了问题 但是因为是react新手,所以不知道问题在什么地方,下面是代码

router.js

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

import React, { Component } from 'react';

import Login from "./routes/Login/login";

import Nav from "./routes/Nav/nav";

import Menu from './routes/Menu/Menu'

import Exam from './routes/Exam/Exam'

function IRouter() {

 return <Router>

 <Switch>

 <Route path="/" exact component={Login}></Route>

 <Route path="/nav" component={Nav}></Route>

 </Switch>

 </Router>

}

const routers = [

 {

 name: '首页菜单',

 path: '/menu',

 component: Menu

 },

 {

 name: '考试',

 path: '/exam',

 component: Exam

 },

];

export { routers, IRouter };

nav.js

import React, { useState } from 'react';

import { Layout, Menu, Row, Col,Image } from 'antd';

import "./nav.scss";

import logo from '../../assets/images/logo.png';

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

import {routers} from '../../router';

import menu from '../Menu/Menu';

const { Header, Content } = Layout;

export default function Nav() {

 return (

 <Layout>

 <Header className="header">

 <div>

 <Row>

 <Col span={12}><img src={logo} style={{ height: '60px' }} /></Col>

 <Col span={12}>这里应该是用户信息</Col>

 </Row>

 </div>

 </Header>

 <Layout>

 <Layout style={{ padding: '0 24px 24px' }}>

 <Content

 className="site-layout-background"

 style={{

 padding: 24,

 margin: 0,

 minHeight: '100vh',

 }}

 >

 <Switch>

 <Router>

 <Route path="/nav" component={menu} exact></Route>

 {

 routers.map((item,index)=>{

 return(

 <Route key={index} path={item.path} component={item.component}></Route>

 )

 })

 }

 </Router>

 </Switch>

 </Content>

 </Layout>

 </Layout>

 </Layout>

 )

}

exam.js

import React ,{ useState, useEffect } from 'react';

import { Button } from 'antd';

import axios from 'axios';

export default function Test() {

 return (

 <div>

 <h1>这是一个测试路由</h1>

 <Button type="primary"></Button>

 </div>

 );

}

exam路由刷新之后 就变成空白

image.png

阅读 310
评论
    1 个回答
    • hashHistory

    • browserHistory

      • browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL
      • 当刷新页面时,浏览器会向服务器请求,服务器实际会去找根目录下对应的文件,发现找不到,因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由,所有内容都是通过React-Router去渲染React组件,自然会报404错误。
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章