Question

刷新后页面无效，但在单击react.js中的链接时工作正常。部署后会出现此问题。我使用 npm run build 部署了我的应用程序。

这是我的index.js文件：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Router, Route, browserHistory, IndexRoute } from 'react-router';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import { CONFIG } from './config';
    /**Import Components**/
    import Dashboard from './components/dashboard';
    import NetRights from './components/net_rights';
    import CommonRights from './components/common_rights';
    import Sales from './components/sales';
    import Finance from './components/finance';


    const Root = () => {
        return (
            <div>
                <Router history={browserHistory}>
                    <Route path={`${process.env.PUBLIC_URL}/`} component={App}>
                        <IndexRoute component={Dashboard}/>
                        <Route path={`${process.env.PUBLIC_URL}/folder_name/dashboard`} component={Dashboard}/>
                        <Route path={`${process.env.PUBLIC_URL}/folder_name/net_rights`} component={NetRights}/>
                        <Route path={`${process.env.PUBLIC_URL}/folder_name/common_rights`} component={CommonRights}/>
                        <Route path={`${process.env.PUBLIC_URL}/folder_name/sales`} component={Sales}/>
                        <Route path={`${process.env.PUBLIC_URL}/folder_name/finance`} component={Finance}/>
                    </Route>
                </Router>
            </div>
        )
    }

    ReactDOM.render(<Root />, document.getElementById('root'));

    registerServiceWorker();

这是我的package.json：

{
  "name": "rtapp09",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "/folder_name/"
}

Answer 1

如果您不介意在网址中添加＃，请使用以下导入：

从“ react-router-dom”导入{HashRouter as Router，Route};

使用哈希历史记录而不是浏览器历史记录，“关于”页面的URL如下所示：http://example.com/#/about哈希（＃）符号后的部分未发送到服务器。因此，服务器仅看到http://example.com/并按预期发送索引页。 React-Router将拾取＃/ about部分并显示正确的页面。

缺点：

“丑陋”的网址使用这种方法无法进行服务器端渲染。就搜索引擎优化（SEO）而言，您的网站只有一个页面，几乎没有任何内容。

react.js页面刷新问题

1 个答案: