web-dev-qa-db-fra.com

Comment ajouter du hachage aux URL dans React-Router 4

Je voudrais ajouter un hachage à mes endopints dans react-router pour empêcher les réponses d'erreur du serveur. J'utilise python -m SimpleHTTPServer -p 8888 pour créer le serveur.

Ce court exemple fonctionne, mais lorsque j'essaie de recharger la page sur une route comme /about alors j'obtiens une erreur: Error response Error code 404. Message: File not found. Error code explanation: 404 = Nothing matches the given URI.

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

const Routes = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/about">About Link</Link></li>
                <li><Link to="/company">Company Link</Link></li>
            </ul>
            <Switch>
                <Route path="/about" component={About} />
                <Route path="/company" component={Company} />
            </Switch>
        </div>
    </Router>
);

class App extends React.Component {
    render() {
        return (
                <Routes />          
        );
    }
}
reactjsroutingreact-routerurl-routing
7
Arkadiusz Wieczorek

Il y a deux façons de contourner ce problème:

1) Faites en sorte que votre serveur Web réponde toujours avec le même index.html fichier, peu importe l'itinéraire. Cela évitera les erreurs 404, mais n'est pas parfait car il ne prendra pas en charge la mise en cache du navigateur

2) Utilisez HashRouter - il gardera la route UI dans la partie de hachage de l'URL, ce qui ne devrait pas faire retourner le serveur 404 et activera le cache côté navigateur. L'inconvénient de cette approche est que vous ne pouvez pas utiliser de liens #target vers des parties spécifiques de la page Web

15
Kuba Orlik