部署到Netlify时刷新页面将返回空白页面

时间:2019-05-08 13:45:20

标签: reactjs react-router create-react-app react-router-v4 netlify

我已经通过GitHub(CD主分支-存储库:https://github.com/willstocks-tech/ws-code-react)向Netlify部署了create-react-app网站的测试版。

当我导航到该站点时,一切运行正常,我可以在Home AboutContact组件之间导航而没有任何问题。

但是,当我在查看其中一个组件时刷新页面时,页面完全返回空白(在浏览器控制台中出现了一些看似无关的错误)。

在摆弄时有没有想念的东西?请原谅任何新手错误,这是我在React上的第一个正确选择!

我尝试使用

创建一个netlify.toml文件
[[redirects]]
from = "/*"
to = "/index.html"
status = 200 

我还创建了一个_redirects文件(如建议的那样),如下所述。

这是我当前的设置:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './layout/App';
import './assets/stylesheets/index.scss';
//import * as serviceWorker from './serviceWorker';

//serviceWorker.unregister();

ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar';
import Home from 'layout/views/home';
import About from 'layout/views/about';
import Contact from 'layout/views/contact';
import Footer from './components/footer';


class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <Router>
                <div className="app">
                    <Navbar />
                    <div className="view">
                        <Switch>
                            <Route exact path="/" component={ Home }/>
                            <Route path="/about" component={ About }/>
                            <Route path="/contact" component={ Contact }/>
                            <Route render={ () => <h1>404 Error</h1> } />
                        </Switch>
                    </div> {/* view */}
                    <Footer />
                </div> {/* app */}
            </Router>
        );
    }
}

export default App;

带有/ public / _redirects文件,该文件当前仅具有:

/*  /index.html  200

我希望能够向某人发送一个链接,说/about,或者让某人刷新页面并看到相同/更新的内容,但此刻他们只会看到空白页面。

1 个答案:

答案 0 :(得分:0)

我真是个傻瓜...我忘了摆脱.html中的/public个文件!

相关问题