React Routing работает локально, но не на моем веб-хостинге. - PullRequest
Новая
       20

React Routing работает локально, но не на моем веб-хостинге.

0 голосов
/ 13 декабря 2018

У меня есть приложение React, которое отлично работает на моем локальном компьютере, но мой маршрут не работает на моем веб-хостинге (веб-облако OVH).

Я проверил много постов, в которых говорится об этом, и я пыталсяследуйте их рекомендациям, но я думаю, что что-то упустил.

Если я хорошо понимаю, я не могу получить доступ к www.mysite/login, потому что в моей папке dist нет login.html.

Итак, я попытался создать static.json как этот 

{
    "root": "dist/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

и .htaccess в моем общедоступном хранилище 

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

вот мой index.js

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>, 
  document.getElementById('root'))

вот мой App.js

class App extends Component {

    render() {
        return (
            <IntlProvider locale={language} messages={messages}>
                <div className="App">
                    <div className="App-content">
                        <div className="menu">
                            <Navbar handleLanguage={langValue => this.langChange(langValue)} language={language} />
                        </div>
                        <Main language={language}/>
                    </div>
                </div>
            </IntlProvider>
        );

а вот мой Main.jsx

export class Main extends React.Component {
    render (){
        return (
            <Switch>
                <Route exact path="/" render={(props) => <Home {...props} language={this.props.language}/>} ></Route>
                <Route path='/login' component={Login} ></Route>
            </Switch>
        );
    }
}

Я думаю, смогу ли я использовать кнопку, которая делает this.props.history.push('/login') Iбудет доступ к моей странице входа в систему, но на самом деле я не могу сделать такую ​​кнопку на главной странице, но это еще одна проблема.

Знаете ли вы, что я что-то упустил или нет?потому что я борюсь с 5 часов, и я думаю, что я проверил каждый пост об этой проблеме, даже официальный документ.

Спасибо за вашу помощь

РЕДАКТИРОВАТЬ:

Я забылпоказать мою экспресс-конфигурацию для этого 

//app.js
const express = require('express');
const http = require('http');
const path = require('path');

let app = express();
app.use(express.static(path.join(__dirname, 'dist')));

// Handles any requests that don't match the ones above
app.get('/*', (req,res) =>{
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

1 Ответ

0 голосов
/ 13 декабря 2018

Все, что вы запрашиваете, должно идти в index.html, который является отправной точкой для вашего приложения.

установка маршрутизатора с приведенной ниже конфигурацией. 

<BrowserRouter basename="/directory-name">
 <App/>
</BrowserRouter>
...