webentwicklung-frage-antwort-db.com.de

Sie sollten <Link> nicht außerhalb eines <Routers> verwenden

Ich versuche, den reaktiver Router in einer Beispielanwendung einzurichten und erhalte 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.

22
A7DC

Ich gehe davon aus, dass Sie den React-Router V4 verwenden, da Sie dasselbe im ursprünglichen Sandbox Link verwendet haben.

Sie rendern die Main-Komponente im Aufruf von ReactDOM.render, die eine Link-Komponente darstellt, und die Main-Komponente befindet sich außerhalb von Router. Deshalb wird der Fehler ausgegeben:

Sie sollten <Link> nicht außerhalb eines <Routers> verwenden

Änderungen:

  1. Verwenden Sie diese Router, BrowserRouter/HashRouter usw., da Sie React-Router V4 verwenden.

  2. Der Router kann nur ein Kind haben, wickeln Sie also alle Routen in eine div oder Switch ein.

  3. 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 Route

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

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

Usw.


Überprüfen Sie auch diese Antwort: Verschachtelte Routen mit dem reaktem Router v4

15
Mayank Shukla

Ich komme irgendwie mit diesem Code:

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 die Main-Komponente nichts über Router wusste, also müssen Sie ihre Vaterkomponente rendern.

3
mj sameri

Für JEST-Benutzer

wenn Sie Jest zum Testen verwenden und dieser Fehler aufgetreten ist, wickeln Sie Ihre Komponente einfach mit <BrowserRouter> ein.

describe('Test suits for MyComponentWithLink', () => {
it('should match with snapshot', () => {
const tree = renderer
  .create(
    <BrowserRouter>
      <MyComponentWithLink/>
    </BrowserRouter>
  )
  .toJSON();
 expect(tree).toMatchSnapshot();
 });
});
3
MBehtemam

Schließen Sie die Link-Komponente in die BrowserRouter-Komponente ein

 export default () => (
  <div>
   <h1>
      <BrowserRouter>
        <Link to="/">Redux example</Link>
      </BrowserRouter>
    </h1>
  </div>
)
1

Immer wenn Sie versuchen, eine Link auf einer Seite anzuzeigen, die sich außerhalb der BrowserRouter befindet, wird diese Fehlermeldung angezeigt.

Diese Fehlermeldung besagt im Wesentlichen, dass keine Komponente, die kein untergeordnetes Element unseres <Router> ist, keine mit React Router zusammenhängenden Komponenten enthalten kann.

Sie müssen Ihre Komponentenhierarchie so migrieren, wie Sie sie in der ersten Antwort oben sehen. Für alle anderen, die diesen Beitrag durchsehen, müssen möglicherweise weitere Beispiele betrachtet werden.

Nehmen wir an, 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 folgendermaßen 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 den Link-Tag von react-router-dom verwendet, die Komponente jedoch außerhalb des <BrowserRouter> platziert wurde. Dies führt zu dem gleichen Fehler wie beim OP-Vorgang. 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, ob der <Header /> vorhanden ist oder was auch immer Ihre Komponente nicht nur im <BrowserRouter>, sondern auch im <div> befindet. Andernfalls erhalten Sie auch die Fehlermeldung, dass ein Router nur ein Kind hat, das auf den <div> verweist ist das Kind von <BrowserRouter>. Alles andere wie Route und Komponenten müssen in der Hierarchie enthalten sein.

Nun ist <Header /> ein untergeordnetes Element von <BrowserRouter> innerhalb der <div>-Tags und kann erfolgreich das Link-Element verwenden.

0
Daniel

Mach es einfach:

render(<BrowserRouter><Main /></BrowserRouter>, document.getElementById('root'));

und vergiss nicht: import { BrowserRouter } from "react-router-dom";

Schreiben Sie router anstelle von Main in render (letzte Zeile im Code) . );

0
Prakhar Mittal