تنظيم routes في react

Rayden Storm · 1 مارس 2021

أنا أتدرب على انشاء موقع والان أصبح فيه الكثير من الصفحات والان المكون الذي يحتوي routes أصبح مكتض جدا هل يمكن معالجة ذلك

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import nprogress from 'nprogress';

//?pages
import Index from './pages/index';
import Questions from './pages/footer/questions';
import BuyRights from './pages/footer/buyrights';
import BuyBooks from './pages/footer/buybooks';
import Dist from './pages/footer/dist';
import Policy from './pages/footer/policy';
import TransAprovals from './pages/footer/transaprovals';
import Workwithus from './pages/footer/workwithus';
import Contact from './pages/footer/contact';
import ContactAuth from './pages/footer/contactauth';
import Terms from './pages/footer/terms';
import Four from './pages/404';
import Home from './pages/home';
import About from './pages/about';
import Blog from './pages/blog';
import Book from './pages/book';
import Books from './pages/books';
import Podcast from './pages/Podcast';
import Videos from './pages/videos';
import FeaturedBooks from './pages/FeaturedBooks';
import FurtherComing from './pages/FurtherComing';
import BooksByCategory from './pages/BooksByCategory';
import BooksSeries from './pages/BooksSeries';
import Events from './pages/events';
import InThePress from './pages/inThePress';
import SinglePost from './pages/singlePost';
import ArabCulture from './pages/ourProjects/arabCultureFestivalInMilan';
import DivineComedy from './pages/ourProjects/divineComedy';
import Stronger from './pages/ourProjects/literatureIsStronger';
import Translation from './pages/ourProjects/translationForum';
import PublishConditions from './pages/ourWriters/publishConditions';
import Writers from './pages/ourWriters/writers';
import Author from './pages/ourWriters/Author';

import Navbar from './components/layout/Navbar';
import TopNavbar from './components/layout/TopNavbar';
// import BooksFilter from './components/books/BooksFilter';
import Footer from './components/layout/Footer';
//?util
import Up from './util/Up';
import SocialButtons from './util/SocialButtons';
import ScrollToTop from './util/ScrollToTop';
import theme from './util/theme';

function App(props) {
  React.useEffect(() => {
    nprogress.done();

    return () => {
      nprogress.start();
    };
  }, []);
  return (
    <>
      <TopNavbar></TopNavbar>
      {/* <BooksFilter></BooksFilter> */}
      <SocialButtons></SocialButtons>
      <ScrollToTop></ScrollToTop>
      <Navbar></Navbar>
      <Switch>
        <Route title="index" exact path="/">
          <Index />
        </Route>

        <Route title="policy" exact path="/policy">
          <Policy />
        </Route>
        <Route title="buyrights" exact path="/buyrights">
          <BuyRights />
        </Route>
        <Route title="buybooks" exact path="/buybooks">
          <BuyBooks />
        </Route>
        <Route title="dist" exact path="/dist">
          <Dist />
        </Route>
        <Route title="transaprovals" exact path="/transaprovals">
          <TransAprovals />
        </Route>
        <Route title="Terms" exact path="/terms">
          <Terms />
        </Route>
        <Route title="questions" exact path="/questions">
          <Questions />
        </Route>
        <Route title="contact" exact path="/contact">
          <Contact />
        </Route>
        <Route title="contact" exact path="/contactauth">
          <ContactAuth />
        </Route>
        <Route title="workwithus" exact path="/workwithus">
          <Workwithus />
        </Route>

        <Route title="podcast" exact path="/podcast">
          <Podcast />
        </Route>
        <Route title="videos" exact path="/videos">
          <Videos />
        </Route>
        <Route title="featured" exact path="/featured">
          <FeaturedBooks />
        </Route>
        <Route title="further" exact path="/furthercoming">
          <FurtherComing />
        </Route>
        <Route title="home" exact path="/home">
          <Home />
        </Route>
        <Route title="about" exact path="/about">
          <About />
        </Route>
        <Route title="blog" exact path="/blog">
          <Blog />
        </Route>
        <Route title="single-post" exact path="/singlePost">
          <SinglePost />
        </Route>
        <Route title="in the press" exact path="/inThePress">
          <InThePress />
        </Route>
        <Route title="book" exact path="/book/:id">
          <Book />
        </Route>
        <Route title="books" exact path="/books_by_category">
          <BooksByCategory />
        </Route>
        <Route title="books_by_series" exact path="/books_by_series">
          <BooksSeries />
        </Route>
        <Route title="books" exact path="/books">
          <Books />
        </Route>
        <Route title="author" exact path="/author/:id">
          <Author />
        </Route>
        <Route title="events" exact path="/events">
          <Events />
        </Route>
        <Route title="arab culture" exact path="/ourProjects/divineComedy">
          <DivineComedy />
        </Route>
        <Route title="Translation" exact path="/ourProjects/translationForum">
          <Translation />
        </Route>
        <Route title="events" exact path="/ourProjects/arabCultureFestivalInMilan">
          <ArabCulture />
        </Route>
        <Route title="Stronger" exact path="/ourProjects/literatureIsStronger">
          <Stronger />
        </Route>
        <Route title="publish conditions" exact path="/ourWriters/publishConditions">
          <PublishConditions />
        </Route>
        <Route title="writers" exact path="/ourWriters/writers">
          <Writers />
        </Route>
        <Route title="404">
          <Four />
        </Route>
      </Switch>
      <Up></Up>
      <Footer></Footer>
    </>
  );
}

export default App;

Salah Eddin Beriani2 · 1 مارس 2021

يمكنك انشاء ملف لتضع فيه ال routes لوحدهم بهذه الطريقة

//?pages
import Index from './pages/index';
import Questions from './pages/footer/questions';
// ......

const routes = [
  {
    path: '/',
    component: Index,
    exact: true,
  },
  {
    path: '/questions',
    component: Questions,
    exact: true,
  },
  //   .......
];

export default routes;

ثم تقوم باستيراد المعلومات في المكون الرئيسي والدوران حول قائمة المعلومات لانشاء routes وبهذه الطريقة يخف الضغط على المكون الرئيسي ويصبح لديك مكان مركزي لتعديل معلومات ال routes

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import nprogress from 'nprogress';

import Navbar from './components/layout/Navbar';
import TopNavbar from './components/layout/TopNavbar';
// import BooksFilter from './components/books/BooksFilter';
import Footer from './components/layout/Footer';
//?util
import Up from './util/Up';
import SocialButtons from './util/SocialButtons';
import ScrollToTop from './util/ScrollToTop';
import theme from './util/theme';
import routes from './util/routes';

function App(props) {
  React.useEffect(() => {
    nprogress.done();

    return () => {
      nprogress.start();
    };
  }, []);
  return (
    <>
      <TopNavbar></TopNavbar>
      {/* <BooksFilter></BooksFilter> */}
      <SocialButtons></SocialButtons>
      <ScrollToTop></ScrollToTop>
      <Navbar></Navbar>
      <Switch>
        {routes.map((route, i) => (
          <Route key={i} {...route} />
        ))}
      </Switch>
      <Up></Up>
      <Footer></Footer>
    </>
  );
}

export default App;

محمد أيت لعرايك · 1 مارس 2021

يمكن كتابة جميع routes في ملف واحد routes.js هكدا

import React from 'react';
import { Router, Route } from 'react-router';
import { Template1, Template2, Template3 } from './templates';

const createRoutes = () => (
    <Router>
      <Route exact path="/sessionstate1" component={Template1}/>
      <Route exact path="/sessionstate2" component={Template2}/>
      <Route exact path="/sessionstate3" component={Template3}/>
      //   أضف هنا االروتس التي تحتاج إليها    
    </Router>
);

export default createRoutes

بعد ذلك يمكن تحميل routes في ملف index.js هكذا

import ReactDOM from 'react-dom';
// تحميل routes
import createRoutes from './routes';


const routes = createRoutes();

ReactDOM.render(
  routes,
  document.getElementById('root')
);

تنظيم routes في react

السؤال

Rayden Storm

2 أجوبة على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

محمد أيت لعرايك

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية