Estoy construyendo un sitio web usando reaccionar. Tengo una url http://0.0.0.0:9000/courseware/course/6/content/programming/issues/lab/1 que muestra una lista de problemas que pertenecen a un laboratorio de identificación 1.
Cuando hago clic en un problema (por ejemplo, 22), quiero que la URL se convierta en http://0.0.0.0:9000/courseware/course/6/content/programming/issue/22 .
Traté de hacer esto
this.props.history.push({ pathname: "issue/" + this.state.issue.id })pero entonces la url se convertiría en /programming/issues/lab/1/issue/22
Traté de hacer esto
const history = useHistory(); history.goBack(); this.props.history.push({ pathname: "issue/" + this.state.issue.id })pero hay un error de gancho de reacción
Entonces traté de hacer
this.props.history.goBack(); this.props.history.push({ pathname: "issue/" + this.state.issue.id })pero esto es navegar por la página y la función de inserción a continuación no funciona.
Primero, ¿estoy tratando con las URL de la manera correcta? En caso afirmativo, ¿cómo soluciono este problema?
Supongo que tengo que usar el historial para navegar entre las URL sin recargar la página.
Gracias de antemano
En su caso, sugiero abordar el problema utilizando este tipo de nombre de ruta relativo: "../../../issue/this.state.issue.id" . De esta manera, puede navegar con react-router a la ruta que desea en relación con la ruta actual. Estabas en el camino correcto usando la ruta relativa:
this.props.history.push({ pathname: "issue/" + this.state.issue.id })Solo tenías que decirle que retrocediera 3 pasos.
La única forma en que puede lograr esto es agregando / antes de la URL y agregando la identificación a la URL completa. De esta manera, el enrutador de reacción sabrá que está insertando una ruta de URL absoluta, no la relativa.
this.props.history.push({ pathname: `/courseware/course/${some-id}/content/programming/issue/${this.state.issue.id}` })Usa react-router-dom es mucho más fácil. En primer lugar, npm i -D react-router-dom
Basic Usage
index.js:
import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Layout from "./pages/Layout"; import Home from "./pages/Home"; import Blogs from "./pages/Blogs"; import Contact from "./pages/Contact"; import NoPage from "./pages/NoPage"; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="blogs" element={<Blogs />} /> <Route path="contact" element={<Contact />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); Envolvemos nuestro contenido primero con <BrowserRouter> .
Luego definimos nuestras <Routes> . Una aplicación puede tener múltiples <Routes> . Nuestro ejemplo básico solo usa uno.
<Route> se pueden anidar. La primera <Route> tiene una ruta de / y representa el componente Diseño.
Los <Route> anidados heredan y se agregan a la ruta principal. Entonces, la ruta de los blogs se combina con el padre y se convierte en /blogs.
La ruta del componente Inicio no tiene una ruta pero tiene un atributo de índice. Eso especifica esta ruta como la ruta predeterminada para la ruta principal, que es /.
Establecer la ruta en * actuará como un cajón de sastre para cualquier URL no definida. Esto es genial para una página de error 404.
La <Outlet> representa la ruta actual seleccionada.
<Link> se utiliza para establecer la URL y realizar un seguimiento del historial de navegación.
Cada vez que enlacemos a una ruta interna, usaremos <Link> en lugar de <a href=""> .
La "ruta de diseño" es un componente compartido que inserta contenido común en todas las páginas, como un menú de navegación.
Layout.js:
import { Outlet, Link } from "react-router-dom"; const Layout = () => { return ( <> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blogs">Blogs</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> <Outlet /> </> ) }; export default Layout;