Tengo un proyecto de prueba simple que usa reaccionar que muestra a los usuarios de una API falsa. El componente principal se llama App y es mi página de inicio. Hay un botón llamado panel en el componente de la aplicación. Quiero que vaya al Componente del panel cuando haga clic en él.
function App() { const users = useSelector(state => state.users) const dispatch = useDispatch(); const getUsers=()=>{ // async action using redux-thunk return async function(dispatch){ try{ dispatch(GetUserRequest()) const response= await axios.get("https://reqres.in/api/users?page=2") dispatch(GetUserSuccess(response.data.data)) } catch(er){ dispatch(GetUserFail(er)) } } } useEffect(()=>{ dispatch(getUsers()) } ,[]) return (<> <Provider store={store}> <Routes> <Route path="users" element={<Users Items={users}/>}/> <Route path="/Panel" element={<Panel/>}/> </Routes> <button className='btn btn-primary' onClick={()=>{ navigate("/Panel") }}>Panel</button> <Users/> </>Es simple, ¡pero quiero que el componente Panel sea una página separada en lugar de ser parte de la página de inicio! Y no quiero mostrar otros componentes (en mi componente de usuario del proyecto)
Así que probé un truco: usar el estado showPages para determinar qué página se debe mostrar:
function App() { const users = useSelector(state => state.users) const[showPages,setShowPages]=useState("users") useEffect(()=>{ setShowPages("users") dispatch(getUsers()) } ,[]) return (<> <button className='btn btn-primary' onClick={()=>{ setShowPages("panel") }}>Panel</button> {showPages=="users" && ( <Users/> Items={users})} {showPages=="Panel" && <Panel/>} </>Ahora, cuando hago clic en el botón del Panel, puedo ver la página del Panel como una página separada, pero adivinen qué: ¡me perdí el botón Atrás del navegador! Tampoco quiero usar un proyecto basado en html y usar reaccionar en él.
¿Es posible crear un sitio web que no sea de spa usando Pure React? o debería crear un proyecto sin reaccionar y usar reaccionar en él.
Creo que sería mejor aprender Framework esos usos React. Porque React no es compatible con SEO. No tenía representación del lado del servidor ni generación de servidor estático. Solo proporciona obtención y representación del lado del cliente.
También puedes probar React Router. Pero en algún momento, se sentiría difícil de mantener rutas con React Router.
Si desea aprender el marco que usa React, puede probar RemixJS.
Finalmente, encontré una manera. Creé un nuevo componente llamado Inicio y le puse el componente Usuario y el botón del panel. En lugar de representar el componente de inicio en el componente de la aplicación, hice la página de inicio del componente de inicio mediante el enrutamiento:
<Route path="/" element={<Home Items={users}/>}/>También enruté el componente del Panel en el componente de la aplicación
<Route path="/Panel" element={<Panel/>}/>Ahora aquí está mi componente de aplicación:
function App() { const users = useSelector(state => state.users) const dispatch = useDispatch(); const getUsers=()=>{ // async action using redux-thunk return async function(dispatch){ try{ dispatch(GetUserRequest()) const response= await axios.get("https://reqres.in/api/users?page=2") dispatch(GetUserSuccess(response.data.data)) } catch(er){ dispatch(GetUserFail(er)) } } } useEffect(()=>{ dispatch(getUsers()) } ,[]) return(<> <Routes> <Route path="/" element={<Home Items={users}/>}/> <Route path="/Panel" element={<Panel/>}/> </Routes> </>) }Y aquí está el componente Inicio:
const Home = (props) => { return ( <> <button className='btn btn-primary' onClick={()=>{ navigate("/Panel") }}>Panel</button> <Users Items={props.Items}/> </> }Ahora, cuando hago clic en el botón Panel, veo el componente Panel como una página separada (no spa). También puede usar la ruta secundaria y la salida si desea tener un sitio semi spa (por ejemplo, si desea mostrar algunos componentes en la página de inicio y mostrar otros como páginas separadas)