求教：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路由刷新之后 就变成空白

回答

  • hashHistory

  • browserHistory

    • browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL

    • 当刷新页面时，浏览器会向服务器请求，服务器实际会去找根目录下对应的文件，发现找不到，因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由，所有内容都是通过React-Router去渲染React组件，自然会报404错误。

以上是 求教：react路由可以正常跳转，跳转之后刷新页面就变成空白 的全部内容， 来源链接： utcz.com/a/49404.html

回到顶部