reactjs - link - react-router-dom redirect

No debes usar<Link> fuera de un<Router>

Question

Estoy intentando configurar react-router en una aplicación de ejemplo, y obtengo el siguiente error:

You should not use <Link> outside a <Router>

Mi aplicación está configurada como tal:

Componente principal

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''));

Niño / Componente Main

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

¿Alguna idea de lo que estoy haciendo mal aquí?

Aquí hay un enlace de Sandbox para demostrar el problema.

Answer 1

Adjuntar componente de enlace dentro del componente BrowserRouter

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

Answer 2

Cada vez que intente mostrar un Link en una página que está fuera de BrowserRouter obtendrá ese error.

Este mensaje de error básicamente indica que cualquier componente que no sea un elemento secundario de nuestro <Router> no puede contener ningún componente relacionado con React Router.

Debe migrar la jerarquía de sus componentes a la forma en que la ve en la primera respuesta anterior. Para cualquier otra persona que revise esta publicación, es posible que deba ver más ejemplos.

Digamos que tienes un componente Header.js que se ve así:

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;

Y su archivo App.js ve así:

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;

Tenga en cuenta que el componente Header.js está haciendo uso de la etiqueta de Link de react-router-dom pero que el componente se colocó fuera del <BrowserRouter> , esto llevará al mismo error que la experiencia del OP. En este caso, puede hacer la corrección en un movimiento:

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;

Revise detenidamente y asegúrese de tener el <Header /> o lo que sea que esté su componente, no solo dentro del <BrowserRouter> sino también dentro del <div> , de lo contrario, también obtendrá el error de que un enrutador solo puede tener un hijo que se refiere al <div> que es el hijo de <BrowserRouter> . Todo lo demás, como la Route y los componentes, deben ir dentro de la jerarquía.

Así que ahora el <Header /> es un hijo del <BrowserRouter> dentro de las etiquetas <div> y puede hacer uso exitoso del elemento Link .

Answer 3

Escriba el enrutador en lugar de Main en render (última línea en el código). Me gusta este ReactDOM.render (router, document.getElementById (''root''));

Answer 4

Si no desea cambiar mucho, use el código a continuación dentro del método onClick ().

this.props.history.push(''/'');

Answer 5

Supongo que está utilizando React-Router V4, como lo hizo en el enlace original de Sandbox.

Está ReactDOM.render el componente Main en la llamada a ReactDOM.render que representa un Link y el componente principal está fuera del Router , por eso está generando el error:

No debes usar <Link> fuera de un <Router>

Cambios :

1. Utilice cualquiera de estos enrutadores , BrowserRouter / HashRouter, etc., porque está utilizando React-Router V4.

2. El enrutador solo puede tener un hijo, así que envuelva todas las rutas en un div o Switch .

3. React-Router V4, no tiene el concepto de rutas anidadas, si desea utilizar rutas anidadas, defina esas rutas directamente dentro de ese componente.

Verifique este ejemplo de trabajo con cada uno de estos cambios.

Componente principal:

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

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

Componente Main de la ruta.

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

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

Etc.

Verifique también esta respuesta: rutas anidadas con el enrutador de reacción v4

Answer 6

Yo subo un poco este código:

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''));

Creo que el error se debió a que estaba procesando el componente Main y el componente Main no sabía nada acerca del Router , por lo que tiene que representar su componente padre.

Answer 7

Para usuarios de JEST

Si usa Jest para realizar pruebas y este error, simplemente envuelve su componente con <BrowserRouter>

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