Actualmente tengo una aplicación de reacción en la que estoy trabajando y el enrutamiento tiene errores. He configurado aplicaciones de reacción y sus enrutamientos como este antes, pero cuando intento enrutar al componente "detalles", solo cambia la URL, pero el componente no se carga. Un par de ojos extra estaría bien para ver lo que me estoy perdiendo. Tengo las rutas configuradas como:
índice.js:
importar React desde 'react'; importar ReactDOM desde 'react-dom'; importar la aplicación desde './App'; importar {Router} desde "react-router-dom"; import { createBrowserHistory } desde "historial";
const historial = createBrowserHistory();
const render = () => { ReactDOM.render( , document.getElementById('root'), ); };
prestar();
Aplicación.js:
importar React desde 'react'; importar {Route, Switch} desde 'react-router-dom'; importar { BreweryPage } desde './route.js';
función App() { retorno ( <> </> ); }
exportar la aplicación predeterminada;
ruta.js
importar React desde 'react'; importar PropTypes desde 'prop-types'; import {Route, Switch, withRouter} from 'react-router-dom'; import { BreweryPage, BreweryDetailPage } desde './pages'; importar {AppContainer} desde "../../common/header";
const BreweryHomePage = ({ match }) => ( <Ruta ruta exacta={ ${match.url} } componente={BreweryPage} /> <Ruta ruta exacta={ ${match.url}/details/:breweryid } componente ={PáginaDetallesDeLaCervecería} /> );
BreweryHomePage.propTypes = { coincidencia: PropTypes.shape({ url: PropTypes.string, }), };
BreweryHomePage.defaultProps = { partido: { url: '', }, };
exportar predeterminado con enrutador (BreweryHomePage);
El componente de la ruta raíz "/" se carga, pero no puedo hacer que el componente de los componentes de detalles se represente cuando se enruta con history.push(path) usando const history = useHistory();.
Hazlo asi
1-index.js debería gustar esto:
import React from "react" import ReactDOM from "react-dom" import App from "./App" import { BrowserRouter } from "react-router-dom" const app = ( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> <React.StrictMode/> ) ReactDOM.render(app, document.getElementById("root"))tienes que agregar BrowserRouter para poder usar la navegación
2- puedes usar BreweryPage en App.js así:
import React from 'react'; import {Route, Switch} from 'react-router-dom'; import { BreweryPage } from './route.js'; function App() { return ( <> <BreweryPage/> </> ); } export default App;3- ruta.js
import React from 'react'; import PropTypes from 'prop-types'; import { Route, Switch, withRouter } from 'react-router-dom'; import { BreweryPage, BreweryDetailPage } from './pages'; import { createBrowserHistory } from "history"; import {AppContainer} from "../../common/header"; const newHistory = createBrowserHistory(); const BreweryHomePage = (props) => ( <Router history={newHistory}> <Switch> <Route exact path="/" component={BreweryPage} /> <Route path="/details/:breweryid" component={BreweryDetailPage} /> </Switch> </Router> ); export default withRouter(BreweryHomePage);