web-dev-qa-db-fra.com

react-router ne fonctionne pas dans les déploiements de production et de surtension

Mon application React fonctionne très bien sur localhost mais quand après l'avoir déployée dans des pages gh ou des surtensions, cela ne me permet pas de parcourir les pages en utilisant l'URL.

  • Ceci est le dépôt du projet lien
  • URL de démonstration ici

les utilisateurs peuvent accéder à la page d'inscription en cliquant sur menuItem dans le coin supérieur droit. mais si l'utilisateur utilise http://chat.susi.ai/signup/ URL, cela donne 404 page

J'ai essayé plusieurs solutions sur Internet mais je n'ai pas fonctionné.

La question suivante est: J'ai créé une page 404 pour apparaître lorsque l'utilisateur essaie de passer à des liens rompus. Cela fonctionne très bien dans localhost. mais pas en production. J'ai essayé la solution this mais rien n'a changé.

cela fait partie de mon fichier index.js

const App = () => (
    <Router history={hashHistory}>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component={ChatApp} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/forgotpwd" component={ForgotPassword} />
                <Route exact path="*" component={NotFound} />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

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

Si quelqu'un peut suggérer une bonne solution avec un exemple de code pour mes problèmes, ce serait vraiment utile pour moi.

javascriptreactjsreact-routerreact-router-dom
10
isuruAb

Cela se produit car les utilisateurs ne reçoivent pas le index.html qui amorce votre application lorsqu'elle visite directement ces URL.

Pour les surtensions, vous pouvez ajoutez un 200.html fichier qui contient le même contenu que le index.html vous déployez (ou renommez-le simplement en 200.html) - cette information sera ensuite diffusée aux utilisateurs à n'importe quelle URL qu'ils visitent qui ne correspond pas à un fichier statique, ce qui permettra à votre application de démarrer.

Modifier: on dirait que vous utilisez create-react-app. Cela fonctionne lorsque vous développez localement car create-react-app's react-scripts le package gère le service de votre index.html comme solution de rechange à ces demandes.

Le react-scripts guide de l'utilisateur contient des sections sur comment gérer cela lors du déploiement sur les pages GitHub et surge.sh (comme ci-dessus).

6
Jonny Buchanan

En changeant .htaccess fichier dans le cas de l'utilisation de Apache comme serveur Web dans votre dossier de build a fonctionné pour moi:

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

J'ai eu le même problème. Et je l'ai résolu très facilement ... :)

J'ai utilisé react sur mon front-end (Create-React-App) et un backend express. En mode dev, tout fonctionne très bien, mais lorsque je suis passé à la version de production, il y avait des problèmes de routage dans mon routage de réaction. Après une longue enquête, j'ai trouvé que le problème était du côté serveur, servant le fichier index.html.

Cela devrait être après tout le routage côté serveur mais avant tout le gestionnaire app.post. En d'autres termes, la ligne suivante doit être placée après tout app.gets et avant tout app.posts

// PRODUCTION
App.get('*', (req, res)=>{
res.sendFile(path.resolve(where, the, index.html, is))
})
0
Mohammad Ebrahimi