web-dev-qa-db-fra.com

Pourquoi le routeur de réaction ne fonctionne-t-il pas?

J'apprends à réagir et j'ai besoin d'ajouter quelques itinéraires avec les itinéraires de réaction.

J'ai installé react-router avec npm install react-router

C'est le main js où je dois déclarer les routes

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

Naviguer vers / fonctionne bien. Mais quand je vais à /example je reçois 

Impossible d'obtenir /example

erreur

Qu'est-ce que je fais mal?

MODIFIER

De cette façon, j'ai le même problème

MODIFIER

Exemple de composant

import React from 'react';

class Example extends React.Component {
    render(){
        return <div>Example</div>
    }
}

export default Example

Ceci est la Link<Link to={'/example'}>aa</Link>

Il n'y a pas d'erreur en console

MODIFIER

Après le changement, j'obtiens cette erreur dans la console (Causée par le Link)

index.js (ligne 27585) Avertissement: l'emplacement "/" n'a pas été activé correspondre à toutes les routes

index.js (ligne 27585) Avertissement: [réagir-routeur] Router non plus par défaut l'accessoire d'histoire à hasch l'histoire. S'il vous plaît utiliser le hashHistory singleton à la place. http://tiny.cc/router-defaulthistory

javascriptreactjsreact-router
7
Pablo

Votre exemple d'itinéraire est imbriqué dans votre itinéraire parent. Vous n'avez donc pas besoin d'un / dans /example.

Vous pouvez aussi essayer de définir une IndexRoute avec tout ce que votre composant home serait pour qu'il ait une référence.

Un lien vers la route vous aiderait probablement pour que vous puissiez voir ce qui va arriver dans l'URL et vous assurer que c'est ce que vous cherchez.

Votre composant App ne doit pas réellement restituer autre chose que {this.props.children}, car c’est là que seront rendus tous les composants gérés par le routeur. Le routeur ne restitue pas les éléments du fichier principal qu’il contrôle les itinéraires et les composants à monter dans le fichier. Composant d'application (généralement appelé AppController), vous devez donc créer un composant d'accueil qui sera rendu à la route / et déclarer que l'utilisation de IndexRoute dans votre routeur définit ensuite les liens entre les composants et si tout est correctement mis en oeuvre .

Lien:

<Link to="example">
  Click Me!
</Link>

Principale:

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Home from './Components/Home';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

AppController:

import React from 'react';

class App extends React.Component {

  render() {
    return (
      <div>
        <div className="routerView">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

Exemple de composant:

import React from 'react';
import {Link} from 'react-router';


class Example extends React.Component {
    render(){
        return(
          <div>
              Example
              <Link to="/">Click Me!</Link>
          </div>
        )
    }
}

export default Example

Composant d'accueil:

import React from 'react';
import {Link} from 'react-router';

class Home extends React.Component {
    render(){
        return (
            <div>
               Home
               <Link to="/example">To Example!</Link>
            </div>
        )
    }
}

export default Home
12
RichG

à partir de routeur v4, si vous utilisez webpack avec react, vous devez ajouter des paramètres devServer dans votre fichier webpack.config.js pour éviter ce problème. Assurez-vous simplement que devServer config a historyApiFallback défini sur true. Si ce n'est pas le cas, vous obtiendrez une erreur impossible dans le navigateur. Je viens de mettre une simple devServer config de mon fichier webpack.config.js sur lequel je travaille actuellement, peut-être aide quelqu'un ....

module.exports = {

 ...

 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'minimal'
  }

 ...

}
2
a_m_dev

J'ai exactement le même problème que la question.

Après avoir essayé la réponse ci-dessus, j'obtiens toujours la même erreur. Il est intéressant de noter qu'il existe également une erreur de syntaxe dans la réponse ci-dessus, où <IndexRoute component={Home}>.__ doit être fermé ou auto-fermé.

Deux façons de faire fonctionner mon truc:

1) Pas un moyen idéal, mais une autre façon de le faire est d'utiliser hashHistory Juste import { Router, Route, IndexRoute, hashHistory } from 'react-router'; et de modifier le routeur en tant que <Router history={hashHistory}>

Maintenant, l'URL ressemble à http: // localhost: 5000/#/example? _K = a979lt

2) Vous pouvez également utiliser useHistory.

Mais ceci ajoute également # dans l'URL, mais il ressemble à ceci: __. http: // localhost: 5000/#/example Les paramètres de requête n'étant pas présents dans le lien car ils seront définis comme suit: faux..

3) Dans mon cas, avec browserHistory, si j'utilise mes itinéraires comme localhost: 5000/#/exemple .__, alors cela fonctionne bien et sans hash, ce n'est pas le cas.

Cliquez sur ce lien pour plus de détails sur chacun d’entre eux . https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md

EDIT: Enfin, j'ai trouvé ma solution pour que cela fonctionne à l'aide de browserHistory . Veuillez vérifier ceci. https://stackoverflow.com/a/38585657/3241111

2
myDoggyWritesCode

Essayez d’ajouter exact avant le chemin du composant App.

render((
    <Router history={browserHistory}>
        <Route exact path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));
1
thierno