پیش به سوی تابستان؛ با تخفیفهای داغ راکت!
بزن بریم!سلام دوستان چطور میشه روت های تو در تو در react ایجاد کرد.
فرض کنید روت های ما به صورت زیر است:
/ // for all pages
/ // for index (home page)
/login
/about
/contact-us
...
...
/panel // for panel
/ //for panel index
/users
/payments
/posts
...
...
در ضمن دوستان از react-router v5 استفاده میکنم .
و اینکه مشکل من بیشتر سر index های اون های هست ، یعنی مثلا چطور روت index ( / ) برای Pages ایجاد کنم .
دقت کنید الان روت ریشه ریشه من یعنی / به کامپوننت layout صفحات اشاره میکنه و داخل این layout دوباره روت های کل صفحات پیاده شده یعنی لاگین و درباره ما و غیره.
از طرفی کنار / یه /panel هم وجود داره که اشاره به layout پنل کاربری میکنه و داخل این layout هم روت های پنل کاربری پیاده شده .
من میخوام این دوتا روت (/ , /panel) به layout های اختصاصی خودشون اشاره کنن یعنی هدر و فوتر هر کدوم از layout ها فرق میکنه .
الان مشکل من سر روت اصلی در هر کدوم از layout ها است.
@Saeeed
سلام.
لینک زیر رو بررسی کنید :
https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5
@mohsenbostan
سلام خیلی ممنون خیلی سخت بود چیز زیادی دستگیرم نشد :)
اگر بیشتر راهنمایی کنید ممنون میشم
@Saeeed
اول یک روت رو به صورت زیر تعریف می کنید :
<Route path='/topics' component={Topics} />
بعد Topics رو به صورت زیر تعریف کنید:
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.path}/:topicId`} component={Topic}/>
</div>
)
ببینید الان من میخوام داخل layout صفحات خودم یک روت برای home داشته باشم و مثلا یک روت برای لاگین.
و این layout هم با روت اصلی باز میشه به این صورت:
/ for layout pages
/ for home
/login
/about
/panel for layout panel and his routes
سلام
در یکی از پروژه های من فایل اصلی routers.js به این صورته
import Login from "../Components/auth/login";
import Checkphone from "../Components/auth/checkphone";
import NotFound from "../Components/Partials/NotFound";
import Dashboard from "../Components/dashboard";
const routers = [
{
path: "/",
component: Login,
exact: true
},
{
path: "/login",
component: Login,
exact: true
},
{
path: "/login/checkphone",
component: Checkphone,
exact: true
},
{
path: "/dashboard",
component: Dashboard,
exact: false
},
{
component: NotFound,
},
]
export default routers;
و فایل app اصلی پروژه به این صورت
import React from 'react';
import {Link , Route , Switch} from 'react-router-dom';
import routers from './router/routers';
function App() {
return (
<>
<Switch>
{routers.map((routers , index) => <Route key={index} {...routers} />)}
</Switch>
</>
);
}
export default App;
و فایل اصلی روتر داشبرد routersDashboard.js به این صورت
import MainDashboard from "../Components/dashboard/main/dashboard";
import MainAddWork from "../Components/dashboard/main/addWork";
import NotFound from "../Components/Partials/NotFound";
const routersDashboard = [
{
path: "/dashboard",
component: MainDashboard,
exact: true
},
{
path: "/dashboard/addwork",
component: MainAddWork,
exact: true
}
,
{
component: NotFound,
},
]
export default routersDashboard;
و فایل index کامپوننت داشبرد هم این شکلیه
import React from 'react';
import {Route , Switch} from 'react-router-dom';
import routersDashboard from '../../router/routersDashboard';
import Sidebar from '../dashboard/sidebar';
import Navbar from '../dashboard/navbar';
export default function Dashboard(){
return (
<>
<Sidebar/>
<Navbar />
<Switch>
{routersDashboard.map((routers , index) => <Route key={index} {...routers} />)}
</Switch>
</>
);
}
امیدوارم به جواب رسیده باشید ، اگر در روابط بین این چهار فایل سوالی داشتید بپرسید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟