Me gustaría representar algunas de mis rutas dentro de mi diseño público y algunas otras rutas dentro de mi diseño privado, ¿hay una manera limpia de hacerlo?
Ejemplo que obviamente no funciona, pero espero que explique aproximadamente lo que estoy buscando:
<Router> <PublicLayout> <Switch> <Route exact path="/" component={HomePage} /> <Route exact path="/about" component={AboutPage} /> </Switch> </PublicLayout> <PrivateLayout> <Switch> <Route exact path="/profile" component={ProfilePage} /> <Route exact path="/dashboard" component={DashboardPage} /> </Switch> </PrivateLayout> </Router>Me gustaría que el diseño cambie para ciertas rutas, ¿cómo hago esto con el nuevo enrutador de reacción?
Las rutas de anidamiento ya no funcionan y me da este error:
You should not use <Route component> and <Route children> in the same route; <Route children> will be ignoredEditar: hacer que los diseños envuelvan grupos completos de rutas también significa que esos diseños solo se representan una vez, siempre que permanezca en el mismo grupo de rutas privadas/públicas. Esto es un gran problema si su diseño tiene que obtener algo de su servidor, por ejemplo, ya que eso sucedería en cada cambio de página si envuelve cada página con un diseño.
Lo que he hecho para esto es crear un componente simple que agrega una propiedad adicional al componente Ruta que es el diseño:
function RouteWithLayout({layout, component, ...rest}){ return ( <Route {...rest} render={(props) => React.createElement( layout, props, React.createElement(component, props)) }/> ); }Entonces, en tu caso, tus rutas se verían así
<Switch> <RouteWithLayout layout={PublicLayout} path="/" component={HomePage}/> <RouteWithLayout layout={PublicLayout} path="/about" component={AboutPage}/> <RouteWithLayout layout={PrivateLayout} path="/profile" component={ProfilePage}/> <RouteWithLayout layout={PrivateLayout} path="/dashboard" component={DashboardPage}/> </Switch>ACTUALIZACIÓN 2020
Bueno, por ahora estoy siguiendo este enfoque, es más simple que el que publiqué antes:
const Pages = () => { return ( <ReactRouter> <Switch> <Route path="/comingsoon" component={ComingSoon} exact /> <Route> <MainLayout> <Switch> <Route path="/home" exact> <Home /> </Route> <Route path="/login" exact> <Login /> </Route> <Route path="/useraccount" exact> <UserAccount /> </Route> <Route path="/createaccount" exact> <CreateAccount /> </Route> <Route path="/contact" exact> <Contact /> </Route> <Route path="/about" exact> <About /> </Route> <Redirect path="/" exact to="/comingsoon" /> <Route path="*" exact component={NotFound} /> </Switch> </MainLayout> </Route> </Switch> </ReactRouter> ); };De esta manera, MainLayout se encargará de todo excepto de la página próximamente.
RESPUESTA ANTIGUA
Si está utilizando Typescript y desea seguir este enfoque de diseño de reacción , puede declarar su diseño de esta manera:
import './Default.less'; import React from 'react'; import { Route } from "react-router-dom"; import { Sider } from './Components'; import { Notification } from 'Client/Components'; interface IDefaultProps { component: any path?: string; exact?: boolean; } const Default: React.SFC<IDefaultProps> = (props) => { const { component: Component, ...rest } = props; return <Route {...rest} render={matchProps => ( <div className="defaultLayout"> <Sider /> <div className="defaultLayoutContent"> <Component {...matchProps} /> </div> <Notification /> </div> )} /> } export default Default;Y declarar rutas como esta:
import React from 'react'; import { Route } from 'react-router-dom'; import { DefaultLayout } from 'Client/Layout'; import { Dashboard, Matters, Schedules, Students } from './Containers'; export const routes = <div> <DefaultLayout exact path="/" component={Dashboard} /> <DefaultLayout path="/matters" component={Matters} /> <DefaultLayout path="/schedules" component={Schedules} /> <DefaultLayout path="/students" component={Students} /> </div>;Después de buscarlo, la forma limpia y eficiente (evitando re-renderizados abusivos):
<Route exact path={["/about", "/"]}> <PublicLayout> <Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> </PublicLayout> </Route> <Route path={["/profile", "/dashboard"]}> <PrivateLayout> <Route path="/profile" component={ProfilePage} /> <Route path="/dashboard" component={DashboardPage} /> </PrivateLayout> </Route>también, se puede refactorizar, vea mi respuesta completa: https://stackoverflow.com/a/57358661/3437790