Я развернул бета-версию сайта create-react-app
на Netlify через GitHub (главная ветка CD - репо: https://github.com/willstocks-tech/ws-code-react).
Когда я перехожу на сайт, все работает отлично, я могу без проблем перемещаться между компонентами Home
About
& Contact
.
Однако, когда я обновляю страницу во время просмотра одного из этих компонентов, страница возвращается полностью пустой (с парой, казалось бы, несвязанных ошибок в консоли браузера).
Что-то я упустил во время возни? Пожалуйста, извините за ошибки новичков, это мой первый правильный подход к 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
, или чтобы человек обновил страницу и увидел то же / обновленное содержимое, но в данный момент они будут видеть только пустую страницу.