Tengo problemas para cambiar la vista al reaccionar con el enrutamiento. Solo quiero mostrar una lista de usuarios, y hacer clic en cada usuario debería navegar a una página de detalles. Aquí está el enrutador:
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app'))Cuando uso la url /detalles, mi navegador navega a esa url, pero no cambia la vista. Cualquier otra ruta arroja 404, por lo que parece reconocer la ruta pero no actualizar.
Debe especificar el atributo exact para su indexRoute; de lo contrario, incluso para la ruta /details , seguirá coincidiendo con / . También intente importar la Route desde react-router-dom
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Route } from 'react-router-dom'; import Users from "./components/Users"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route exact path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app'))ACTUALIZAR:
Otra cosa que debe hacer es adjuntar su componente Usuarios con withRouter . Debe utilizar withRouter solo cuando su componente no recibe los Router props ,
Esto puede suceder en los casos en que su componente es un elemento secundario anidado de un componente representado por el enrutador o no le ha pasado los accesorios del enrutador o cuando el componente no está vinculado al enrutador en absoluto y se representa como un componente separado de las Rutas.
En Users.js agregar
import {withRouter} from 'react-router'; ......... export default withRouter(Users)Solo tiene que envolver los componentes dentro conRouter .
<Route exact path="/mypath" component={withRouter(MyComponent)} />Aquí hay un archivo App.js de muestra:
... import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; class App extends Component { render() { return ( <Router> <Switch> <Route exact path="/" component={withRouter(Home)} /> <Route exact path="/profile" component={withRouter(Profile)} /> </Switch> </Router> ); } } export default App;Adicional
Si está utilizando el enrutador de reacción, se llamará a componentWillReceiveProps cada vez que cambie la URL.
componentWillReceiveProps(nextProps) { var currentProductId = nextProps.match.params.productId; var nextProductId = nextProps.match.params.productId; // from the new url ... }Nota
Alternativamente, también puede envolver el componente en withRouter antes de exportar, pero luego debe asegurarse de algunas otras cosas. Normalmente me salto este paso.
export default withRouter(Profile)Tuve el mismo problema y descubrí que era porque tenía un enrutador anidado. Una vez que eliminé el enrutador anidado y simplemente puse las rutas específicas de mi componente dentro de un componente de conmutador, el problema se resolvió sin tener que usar withRouter ni realizar ningún cambio adicional.
<Router> // <--Remove nested Router <Switch> <Route exact path="/workflows" component={ViewWorkflows} /> <Route path="/workflows/new" component={NewWorkflow} /> </Switch> </Router>Yusufbek está describiendo un problema similar. Creo que es mucho más limpio almacenar las rutas relacionadas con los componentes en un nivel de vista en lugar de almacenarlas todas en un enrutador principal. En una aplicación de producción, serán demasiadas rutas para leer fácilmente y depurar problemas.