J'ai créé le suivi avec le routeur react.
import React from 'react';
const NotFound = () => (
<h2>404 Page Not Found</h2>
);
export default NotFound;
Je veux ouvrir la page Notfound si une URL non valide.
J'ai essayé d'ouvrir localhost: 3000 / err mais, il n'ira pas au composant NotFound.
Mon composant not found est simple.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class Main extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Content} />
<Route path='/user/:id' component={User} />
<Route path='*' component={NotFound} />
</Switch>
</Router>
);
}
export default Main
J'utilise " react-router-dom ":" ^ 4.3.1
4 Réponses :
Pour que le routage côté client fonctionne, le serveur doit toujours renvoyer le même index.html pour toutes les routes.
Ainsi, localhost: 3000 / err doit renvoyer votre index.html avec le javascript du routeur côté client.
J'ai fait suivre dans mon fichier server.js. app.get ('*', (req, res) => {res.sendFile (path.join (__ dirname, './index.html'));});
voyez-vous index.html revenir dans devTools?
alors, la configuration de votre serveur (express?) ne retourne pas correctement pour toutes les routes.
En fait, j'ai le code suivant. app.get ('*', (req, res) => {res.sendFile (path.join (__ dirname, './index.html'));}); app.listen (port, fonction (err) {if (err) {console.log (err);} else {open ('http: // localhost:' + port);}})
Avez-vous essayé d'utiliser la redirection? J'utilise cela dans mon application et cela fonctionne parfaitement. Voici le code mis à jour pour votre référence -
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './components/app.js'
import styles from './styles/style.css'
import { store } from './stores/store'
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'))
Insérez votre application dans BrowserRouter.
import {Route, Switch, Redirect } from 'react-router-dom';
class Main extends Component {
render() {
return (
<Switch>
<Route exact path='/' component={Content} />
<Route path='/user/:id' component={User} />
<Route path="/not-found" render={props => <NotFoundPage />} />
<Redirect to="not-found" />
</Switch>
);
}
export default Main
Faites-moi savoir si cela vous aide. p>
J'ai mis un peu ma réponse à jour. Cela devrait certainement fonctionner.
Pardon. Pas de chance. Il arrête même le rendu d'un autre composant
Il n'ouvrira pas la page introuvable
Je crois que vous avez ajouté le BroswerRouter dans votre index.js
Vous devez l'ajouter à votre fichier où vous regroupez l'ensemble de l'application.
Par exemple, je fais cela dans index.js et j'importe App.js ici.Donc, dans votre cas, vous devez importer Main.js et inclure le composant Main dans BrowserRouter.
Cela devrait fonctionner alors, il manque probablement quelque chose d'autre dans votre code. doivent vérifier les journaux.
Vous venez de vérifier si vous avez supprimé Router de votre Main.js?
Enfin, j'ai résolu en utilisant la solution suivante.
Dans mon fichier de configuration webpack (webpack.config.js), j'ai ajouté ce qui suit:
output: {
publicPath: '/'
},
devServer: {
historyApiFallback: true
}
<Router history={history}>
<Switch>
<Route exact path={[routes.user.details]} component={UserProfile} />
<Route exact path={[routes.category.collection]} component={CategoryCollection} />
<Route exact path={[routes.category.details]} component={CategoryDetails} />
<Route exact path={[routes.product.collection]} component={ProductCollection} />
<Route exact path={[routes.product.details]} component={ProductDetails} />
<Route exact path={routes.auth.login} component={Login} />
<Route exact path={routes.auth.register} component={Register} />
<Route exact path={routes.auth.resetPassword} component={ResetPassword} />
<Route
path="*"
component={() => {
if (user.id) {
return <Redirect to={routes.user.details} />;
}
return <Redirect to={routes.auth.login} />;
}}
/>
</Switch>
</Router>
Vous dites " J'ai essayé d'ouvrir localhost: 3000 / err mais, il ne parviendra pas au composant NotFound. ". Que obtenez-vous à la place? J'ai juste essayé d'utiliser votre code (en utilisant
"react-router-dom": "^ 4.3.1), et cela fonctionne très bien (surlocalhost: 3000 / err J'obtiens " Page 404 introuvable ").@MarcoS j'ai
Impossible d'obtenir / errVotre projet se compile-t-il avec succès? C'est-à-dire: obtenez-vous quelque chose comme
Compilé avec succès!sur votre commandeyarn start? Et, surtout, quelque chose commeVous pouvez maintenant voir mon-application dans le navigateur.?@MarcoS Oui.
i ｢wdm｣: Compilé avec succès.localhost: 3000 /fonctionne-t-il correctement?Oui. Il ouvrira le composant Content et même le deuxième Rout fonctionne également très bien, ce qui ouvre le composant User
continuons cette discussion dans le chat .