react.js - react-route history模式怎么配置？

问题描述

问 题

问题：
HashRouter 改为 Router 就全部空白页了。也不报错。

备注：
我知道实际部署中需要在服务端配置一下，避免刷新404的问题（vueJs项目中弄过）。

route/index.js hash模式配置 。一切正常

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


//路由 页面 的加载（推荐单文件的写法）
// import Home from '../pages/home.jsx';
import Simple from '../pages/simple.jsx';
import Classify from '../pages/classify.jsx';
//懒加载方式
// const Classify = resolve => System.import('../pages/classify.jsx');
import BackPage from '../pages/backPage.jsx';
import Todo from '../store/container/todoContainer'
import Counter from '../store/container/couterContainer'

//不推荐这样写
const Home = () => (
    <div className="up-page page-home">
        <div className="up-header">Home</div>
    </div>
);

// 路由配置
const routes = [
    {path: "/", text: "home", component: Home},
    {path: "/home", text: "home", component: Home},
    {path: "/simple", text: "test", component: Simple},
    {path: "/todo", text: "todo", component: Todo},
    {path: "/counter", text: "counter", component: Counter},
    {path: "/back", text: "back", component: BackPage},
    {path: "/classify", text: "classify", component: Classify},
];

//主入口文件
import App from '../app.jsx';

const AppRouter = () => (
    <HashRouter>
        <App>
            {
                routes.map((page, index) => page.component ? <Route key={index} exact path={page.path} component={page.component}/> : "")
            }
        </App>
    </HashRouter>
);


export default AppRouter;

解决方案

打开history api fallback

这篇关于react.js - react-route history模式怎么配置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！