Ich versuche, den React-Router in einer Beispielanwendung einzurichten, und erhalte die folgende Fehlermeldung:
You should not use <Link> outside a <Router>
Meine App ist wie folgt eingerichtet:
Übergeordnete Komponente
const router = (
<div className="sans-serif">
<Router histpry={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</div>
);
render(<Main />, document.getElementById('root'));
Kind / Main
Komponente
export default () => (
<div>
<h1>
<Link to="/">Redux example</Link>
</h1>
</div>
)
Irgendeine Idee, was ich hier falsch mache?
Hier ist ein Sandbox-Link , um das Problem zu demonstrieren.
reactjs
react-router
jsx
A7DC
quelle
quelle
react-router
, da Sie unterschiedliche Ansätze für das Index-Routing verwenden.Antworten:
Ich gehe davon aus, dass Sie React-Router V4 verwenden, wie Sie es auch im ursprünglichen Sandbox Link verwendet haben.
Sie rendern die
Main
Komponente in dem AufrufReactDOM.render
, der a rendert,Link
und die Hauptkomponente befindet sich außerhalb vonRouter
. Deshalb wird der Fehler ausgegeben:Änderungen :
Verwenden Sie einen dieser Router , BrowserRouter / HashRouter usw., da Sie React-Router V4 verwenden.
Der Router kann nur ein untergeordnetes Element haben. Schließen Sie daher alle Routen in einen
div
oder Switch ein .React-Router V4 hat nicht das Konzept verschachtelter Routen. Wenn Sie verschachtelte Routen verwenden möchten, definieren Sie diese Routen direkt in dieser Komponente.
Überprüfen Sie dieses Arbeitsbeispiel mit jeder dieser Änderungen.
Übergeordnete Komponente:
const App = () => ( <BrowserRouter> <div className="sans-serif"> <Route path="/" component={Main} /> <Route path="/view/:postId" component={Single} /> </div> </BrowserRouter> ); render(<App />, document.getElementById('root'));
Main
Komponente von der Routeimport React from 'react'; import { Link } from 'react-router-dom'; export default () => ( <div> <h1> <Link to="/">Redux example</Link> </h1> </div> )
Etc.
Überprüfen Sie auch diese Antwort: Verschachtelte Routen mit React Router v4
quelle
Für JEST- Benutzer
Wenn Sie Jest zum Testen verwenden und dieser Fehler auftritt, wickeln Sie Ihre Komponente einfach mit ein
<BrowserRouter>
describe('Test suits for MyComponentWithLink', () => { it('should match with snapshot', () => { const tree = renderer .create( <BrowserRouter> <MyComponentWithLink/> </BrowserRouter> ) .toJSON(); expect(tree).toMatchSnapshot(); }); });
quelle
react-test-renderer
, die nicht für die Create-React-App integriert ist. Wenn Sie das eingebaute verwenden@testing-library/react
, verwenden Sierender(<BrowserRouter><MyComponent/></BrowserRouter>);
stattdessen.Schließen Sie die Link-Komponente in die BrowserRouter-Komponente ein
export default () => ( <div> <h1> <BrowserRouter> <Link to="/">Redux example</Link> </BrowserRouter> </h1> </div> )
quelle
Wenn Sie versuchen,
Link
eine Seite außerhalb der Seite anzuzeigenBrowserRouter
, wird dieser Fehler angezeigt .Diese Fehlermeldung besagt im Wesentlichen, dass Komponenten, die nicht
<Router>
untergeordnet sind, keine React Router-bezogenen Komponenten enthalten dürfen.Sie müssen Ihre Komponentenhierarchie so migrieren, wie Sie es in der ersten Antwort oben sehen. Für alle anderen, die diesen Beitrag lesen und sich möglicherweise weitere Beispiele ansehen müssen.
Angenommen, Sie haben eine
Header.js
Komponente, die folgendermaßen aussieht:import React from 'react'; import { Link } from 'react-router-dom'; const Header = () => { return ( <div className="ui secondary pointing menu"> <Link to="/" className="item"> Streamy </Link> <div className="right menu"> <Link to="/" className="item"> All Streams </Link> </div> </div> ); }; export default Header;
Und Ihre
App.js
Datei sieht so aus:import React from 'react'; import { BrowserRouter, Route, Link } from 'react-router-dom'; import StreamCreate from './streams/StreamCreate'; import StreamEdit from './streams/StreamEdit'; import StreamDelete from './streams/StreamDelete'; import StreamList from './streams/StreamList'; import StreamShow from './streams/StreamShow'; import Header from './Header'; const App = () => { return ( <div className="ui container"> <Header /> <BrowserRouter> <div> <Route path="/" exact component={StreamList} /> <Route path="/streams/new" exact component={StreamCreate} /> <Route path="/streams/edit" exact component={StreamEdit} /> <Route path="/streams/delete" exact component={StreamDelete} /> <Route path="/streams/show" exact component={StreamShow} /> </div> </BrowserRouter> </div> ); }; export default App;
Beachten Sie, dass die
Header.js
Komponente dasLink
Tag von verwendetreact-router-dom
, die Komponente jedoch außerhalb von platziert<BrowserRouter>
wurde. Dies führt zu demselben Fehler wie die einzige Erfahrung des OP. In diesem Fall können Sie die Korrektur in einem Zug vornehmen:import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; import StreamCreate from './streams/StreamCreate'; import StreamEdit from './streams/StreamEdit'; import StreamDelete from './streams/StreamDelete'; import StreamList from './streams/StreamList'; import StreamShow from './streams/StreamShow'; import Header from './Header'; const App = () => { return ( <div className="ui container"> <BrowserRouter> <div> <Header /> <Route path="/" exact component={StreamList} /> <Route path="/streams/new" exact component={StreamCreate} /> <Route path="/streams/edit" exact component={StreamEdit} /> <Route path="/streams/delete" exact component={StreamDelete} /> <Route path="/streams/show" exact component={StreamShow} /> </div> </BrowserRouter> </div> ); }; export default App;
Bitte überprüfen Sie sorgfältig und stellen Sie sicher, dass Sie die
<Header />
oder was auch immer Ihre Komponente nicht nur<BrowserRouter>
innerhalb<div>
, sondern auch innerhalb der hat. Andernfalls erhalten Sie auch die Fehlermeldung, dass ein Router möglicherweise nur ein Kind hat, das sich auf das Kind bezieht, von dem<div>
das Kind ist<BrowserRouter>
. Alles andere wieRoute
und Komponenten müssen in der Hierarchie enthalten sein.Das ist nun
<Header />
ein untergeordnetes Element<BrowserRouter>
innerhalb der<div>
Tags und kann dasLink
Element erfolgreich verwenden .quelle
Ich habe mir diesen Code ausgedacht:
import React from 'react'; import { render } from 'react-dom'; // import componentns import Main from './components/Main'; import PhotoGrid from './components/PhotoGrid'; import Single from './components/Single'; // import react router import { Router, Route, IndexRoute, BrowserRouter, browserHistory} from 'react-router-dom' class MainComponent extends React.Component { render() { return ( <div> <BrowserRouter history={browserHistory}> <Route path="/" component={Main} > <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}></Route> </Route> </BrowserRouter> </div> ); } } render(<MainComponent />, document.getElementById('root'));
Ich denke, der Fehler war, weil Sie die
Main
Komponente gerendert haben und dieMain
Komponente nichts darüber wussteRouter
, also müssen Sie ihre Vaterkomponente rendern.quelle
Mach es einfach:
render(<BrowserRouter><Main /></BrowserRouter>, document.getElementById('root'));
und nicht vergessen:
import { BrowserRouter } from "react-router-dom";
quelle
Ich habe diesen Fehler erhalten, weil ich eine wiederverwendbare Komponente aus einer npm-Bibliothek importiert habe und die Versionen von
react-router-dom
nicht übereinstimmten.Stellen Sie also sicher, dass Sie an beiden Stellen dieselbe Version verwenden!
quelle
Schreiben Sie den Router anstelle von Main in Render (letzte Zeile im Code). Gefällt mir ReactDOM.render (Router, document.getElementById ('root'));
quelle
Sie können die Link-Komponente in die Router-Komponente einfügen. Etwas wie das:
<Router> <Route path='/complete-profiles' component={Profiles} /> <Link to='/complete-profiles'> <div>Completed Profiles</div> </Link> </Router>
quelle
Wenn Sie nicht viel ändern möchten, verwenden Sie den folgenden Code in der onClick () -Methode.
this.props.history.push('/');
quelle