<!-- Included Script --> 
 <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
  
    
	<div id="root"></div>
	
    <script type="text/babel">	
		
		var Router = ReactRouter.Router;
        var Route = ReactRouter.Route;
        var IndexRoute = ReactRouter.IndexRoute;
        var Link = ReactRouter.Link;
        var browserHistory = ReactRouter.browserHistory;

        class Page extends React.Component {
          
            render() {
                return (
                     <div>
                         <Link to='/about'>India </Link>
                     </div>
                );
            }
        }

        class About extends React.Component {
          
            render() {
                return (
                        <div>
                            to Router
                        </div>
                );
            }
        }

        class NoMatch extends React.Component {
          
            render() {
                return (
                        <div>
                           No page found
                        </div>
                );
            }
        }

        ReactDOM.render(
            <Router>
                <Route path="/" component={Page}>
                    <Route path="about" component={About}/>
                    <Route path="*" component={NoMatch}/>
                </Route>
            </Router>,
            document.getElementById('root')
        );

    </script>
   

Cela me donne toujours «l'emplacement» de l'erreur indéfinie. J'ai essayé des réponses plus minces dans d'autres articles, mais cela ne fonctionne toujours pas pour moi.

Quelqu'un peut-il m'aider à résoudre ce problème?

Merci d'avance.

0
Nishit Maheta 26 juil. 2017 à 08:38

2 réponses

Meilleure réponse

Réagir-routeur-dom

Utilisez react-router-dom (liaisons DOM pour React Router)

Installer

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

Utilisation

Utilisez simplement ReactRouterDOM au lieu de ReactRouter:

var Router = ReactRouterDOM.BrowserRouter;
var Route = ReactRouterDOM.Route;
var Link = ReactRouterDOM.Link;

Vous pouvez trouver la bibliothèque sur window.ReactRouterDOM.

github / react-router-dom

Exemple de base

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

https://reacttraining.com/react-router/web/api/Route

7
Community 20 juin 2020 à 09:12

Vous avez dit que vous utilisiez la v4 dans un commentaire ... donc quelques éléments ressortent immédiatement et oui ce type d'informations est très important pour obtenir une réponse correcte.

Votre <App/> doit être enroulé autour de l'objet routeur comme indiqué dans la documentation.

https://reacttraining.com/react-router/web/api/Router

<Router>
    <App/>
</Router>

Si vous utilisez la v4, vous n'avez pas besoin de passer dans l'historique ... comme, <Router history={...}, cela est géré pour vous. Vous devez simplement avoir installé le package d'historique ... donc dans votre cas, trouvez un CDN pour cela.

Vous devez placer plusieurs itinéraires dans un <Switch/>.

https://reacttraining.com/react-router/web/api/Switch

<Switch>
    <Route/>
    <Route/>
    ...
</Switch>

C'est ainsi que la v4 détermine plus ou moins la route à sélectionner, de la même manière que l'exécution d'une instruction de commutation.

Commencez par cela ou envisagez un cdn v3.

Vous devriez prendre le temps de lire attentivement cette documentation. L'équipe React Router dispose d'une documentation phénoménale facile à suivre et à implémenter dans des projets de jouets ainsi que des applications Redux ou Relay prêtes pour la production.

https://reacttraining.com/react-router/web/guides/philosophy

2
Scot Matson 3 août 2017 à 04:27