چند قالب در ریکت جی اس
سلام دوستان . دو بخش در سایت وجود داره ( پنل کاربری + سایت ) که هر دو بخش قالب هاش کامل متفاوت ( هدر و .... )
الان من میخواستم این دو قالب با ریکت پیاده سازی کنم ولی برای روتش ب مشکل خوردم لطف میکنید کمک کنید
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/panel">
<div class="panel">
<Route path="/">
<h1>dashboard panel</h1>
</Route>
<Route path="/order">
<h1>order panel</h1>
</Route>
</div>
</Route>
<Route path="/">
<div class="panel">
<Route path="/">
<h1>site</h1>
</Route>
<Route path="/about">
<h1>about</h1>
</Route>
</div>
</Route>
</Switch>
</BrowserRouter>
);
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
0
سلام دوستان . بعد از کلی جستجو به نتیجه رسیدم.
شاید برای خیلی ها سوال باشه پس :
import React from 'react';
import {BrowserRouter,Switch,Route} from "react-router-dom";
import SiteLayout from './layout/siteLayout';
import PanelLayout from './layout/panelLayout';
import SitePage from './pages/sitePage';
import DashboardPage from './pages/dashboardPage';
const AppRoute = ({component:Component,layout:Layout, ...rest}) => (
<Route {...rest} render={props=> (
<Layout>
<Component {...props} />
</Layout>
)}></Route>
)
function App() {
return (
<BrowserRouter>
<Switch>
<AppRoute exact path="/" component={SitePage} layout={SiteLayout}/>
<AppRoute path="/panel" component={DashboardPage} layout={PanelLayout}/>
</Switch>
</BrowserRouter>
);
}
export default App;
خیلی ممنون
0
سلام دوستان یک مشکلی وجود داره برای چند قالب کردن قالب ها
هر قالب خب css خودش داره و همینطور body { } خودش
مشکل دقیقا از اونجایی شروع میشه که ما ایمپورت میکنیم css هر قالب داخل کامپونت layout خودش
و وقتی همه کامپوننت های layout روی app.js ایمپورت میکنیم برای روت کردن
import SiteLayout from './layout/siteLayout';
import PanelLayout from './layout/panelLayout';همه css ها همه کامپوننت ها با هم اجرا میشن.
الان برای اینکه css های یک کامپوننت در کامپوننت والد خود اجرا نشه باید چی کرد ؟