2
votes

Comment éviter la page 404 dans react-router?

Je travaille sur un exemple simple en utilisant React Router.

Je l'ai créé en utilisant create-react-app

Sur un serveur local, chaque lien fonctionne bien ex) localhost: 3000 / login, localhost: 3000 / produit, etc.

Après le déploiement sur mon domaine, j'obtiens une erreur 404 lorsque j'entre mon lien. ex) myDomain.com/login, myDomain.com/product

Cela a l'air bien sur le serveur local, donc je pense qu'il n'y a pas de problème avec le code source.

Ensuite, j'ai reçu une réponse pour rediriger vers la page index.html lorsque la page 404, 403 ... etc apparaît

Est-ce que localhost: 3000 et localhost: 3000 / index.html sont identiques?

Sur la page principale (localhost: 3000 ou myDomain.com), c'est bien rendu.

Dans index.html (localhost: 3000 / index.html ou myDomain.com/index.html), il ne rend que la balise h1 au-dessus de {Home}. Quelque chose ne va pas d'ici?

S'il vous plaît aidez-moi TT

App.js

const Root = () => {
    return (
        <BrowserRouter>
            <App/>
        </BrowserRouter>

    );
};

export default Root;

Root.js

class App extends Component{
  render(){        
    return (
      <div className="App">
        <Header/>
        <h1>asd</h1>
        <h1>asd</h1>
        <Route exact path = "/" component = {Home}/>
          <Route path = "/about" component = {About}/>
          <Route path = "/event" component = {Event}/>
          <Route path = "/qna" component = {QnA}/>
          <Route path = "/login" component = {Login}/>
          <Route path = "/join" component = {Join}/>
          <Route path = "/product" component = {Product}/>
      </div>
    );
  }
}

export default App;

javascript reactjs react-router

1 commentaires

pouvez-vous visiter / itinéraire dans votre application?

3 Réponses :

2
votes

Vous pouvez envelopper vos composants de routage dans un composant de commutateur et rendre un composant par défaut si aucun ne correspond comme ci-dessous.

<Switch>
    <Route exact path = "/" component = {Home}/>
    <Route path = "/about" component = {About}/>
    <Route path = "/event" component = {Event}/>
    <Route path = "/qna" component = {QnA}/>
    <Route path = "/login" component = {Login}/>
    <Route path = "/join" component = {Join}/>
    <Route path = "/product" component = {Product}/>
    <Route component={NoMatch} />
</Switch>

De toute évidence, vous NoMatch composant NoMatch avec ce que vous voudriez que votre composant par défaut soit.

0 commentaires

0
votes

Vous devez ajouter le nom de base au composant BrowserRouter à la racine

 "build": "react-scripts build && cp build/index.html build/404.html",

De plus, vous devez vous assurer que dans 404 cas, vous êtes redirigé vers index.html car c'est un SPA et tout se passe là-bas, vous le faites simplement en remplaçant cette ligne par le script "build" dans package.json

ReactDOM.render(
  <BrowserRouter basename='/My-App/'>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

0 commentaires

0
votes

Je ne pense pas que ce soit votre problème d'application de réaction, mais plutôt la façon dont votre application est déployée.

J'espère que vous avez déployé votre application à l'aide de la version de production (à l'aide de npm run build ). Si tel est le cas, il est fort probable que votre serveur Web ne redirige pas vers la bonne entrée.

Vous devez dire à votre serveur Web (nginx ou caddy, quel que soit le type que vous utilisez) de pointer vers /index.html lorsque vous /index.html sur 404. Voici une configuration simple pour nginx.

https://www.barrydobson.com/post/react-router-nginx/

0 commentaires