React根據(jù)配置生成路由的示例代碼

更新時(shí)間：2024年11月27日 09:55:06 作者：新星_

React路由看似只能由Route組件包裹組件的結(jié)構(gòu)來構(gòu)成,但是其實(shí)也可以通過編寫路由數(shù)組配置然后通過數(shù)組循環(huán)來生成Route組件包裹組件的結(jié)構(gòu),所以本文給大家介紹了React根據(jù)配置生成路由的方法,需要的朋友可以參考下

根據(jù)配置生成路由

React路由看似只能由Route組件包裹組件的結(jié)構(gòu)來構(gòu)成，但是其實(shí)也可以通過編寫路由數(shù)組配置然后通過數(shù)組循環(huán)來生成Route組件包裹組件的結(jié)構(gòu)。

安裝依賴react-router-dom，這是React中用于處理路由的庫

npm install react-router-dom

創(chuàng)建路由配置

創(chuàng)建一個(gè)路由配置文件，其中定義了一個(gè)路由數(shù)組，包含各個(gè)路由的路徑、組件等信息

// src/router/index.js
const routes = [
    {
        path: '/', // 路由路徑
        component: () => import('./views/Home'), // 路由對(duì)應(yīng)的組件
        exact: true
    },
    {
        path: '/about',
        component: () => import('./views/About'),
    },
    {
        path: '/contact',
        component: () => import('./views/Contact'),
    },
    // 可以添加更多的路由配置...
];

export default routes;

exact 屬性用于指定路由匹配是否需要完全精確匹配路徑。當(dāng) exact 設(shè)置為 true 時(shí)，只有當(dāng)URL與path屬性完全一致時(shí)，對(duì)應(yīng)的路由組件才會(huì)被渲染。如果沒有設(shè)置 exact 或者設(shè)置為 false，那么只要URL包含path指定的路徑，該路由就會(huì)被認(rèn)為匹配，進(jìn)而渲染相應(yīng)的組件。

假設(shè)有以下兩個(gè)路由配置：

Home頁面：路徑為 /
User Profile頁面：路徑為 /user/:id

<Routes>
  <Route path="/" element={<Home />} exact />
  <Route path="/user/:id" element={<UserProfile />} />
</Routes>

兩個(gè)路由都是使用 exact: true時(shí)：

當(dāng)訪問 / 時(shí)，只有 Home 組件會(huì)被渲染。當(dāng)訪問 /user/123 時(shí)，只有 UserProfile 組件會(huì)被渲染。

不使用 exact 或 exact: false時(shí)：

當(dāng)訪問 / 時(shí)，Home 組件會(huì)被渲染。當(dāng)訪問 /user/123 時(shí)，由于 /user/:id 包含了 /，所以 Home 和 UserProfile 兩個(gè)組件都會(huì)被渲染。如果沒有設(shè)置 exact，React Router 認(rèn)為 / 是 /user/:id 的一部分。

通常情況下，對(duì)于首頁（通常是根路徑 /），需要使用 exact: true，以避免其他路徑（如 /user/:id）也匹配到根路徑，導(dǎo)致不必要的組件渲染。而對(duì)于其他具體的路徑，則不需要設(shè)置 exact，因?yàn)樗鼈兺ǔＲ呀?jīng)足夠具體，不會(huì)引起混淆。

代碼中使用了import()函數(shù)來異步加載組件，這樣就實(shí)現(xiàn)了按需加載，有助于提高應(yīng)用的性能。

也可以使用lazyHook懶加載的寫法，如下所示：

// src/router/index.js
import React, { lazy } from 'react'
// 懶加載路由
const Home = lazy(()=>import("./views/Home"))
const About = lazy(()=>import("./views/About"))
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
        path: '/contact',
        component: lazy(() => import('./views/Contact')),
   },
]
export default routes

動(dòng)態(tài)生成路由

在項(xiàng)目的主應(yīng)用文件（如App.jsx）中，使用react-router-dom提供的<Routes>和<Route>組件，結(jié)合上面的配置來動(dòng)態(tài)生成路由。

// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import routes from './router/index.js';

function App() {
  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            element={<route.component />}
            exact={route.exact}
          />
        ))}
      </Routes>
    </Router>
  );
}

export default App;

element={<route.component />}，它會(huì)根據(jù)路由數(shù)組配置中數(shù)組元素的component屬性來加載對(duì)應(yīng)的組件。

也可以在main.jsx文件中使用<Router>包裹根組件

// src/main.jsx
import React from 'react'; // 用于創(chuàng)建組件的
import { createRoot } from 'react-dom/client'; // 用于渲染頁面的
import { Provider } from 'react-redux';
import store from './store/index.js';
import App from './App.jsx';
import { BrowserRouter} from 'react-router-dom';
createRoot(document.getElementById('root')).render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
      </BrowserRouter>
    </Provider>
)

使用lazyHook懶加載路由組件時(shí)，需要在App.js中，為所有懶加載的組件提供了一個(gè)錯(cuò)誤邊界或加載狀態(tài)

// src/App.jsx
import React, { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import routes from './router/index.js';

function App() {
  return (
     <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              element={<route.component />}
              exact={route.exact}
            />
          ))}
        </Routes>
     </Suspense>
  );
}

export default App;

還可以將配置的路由數(shù)組循環(huán)動(dòng)態(tài)生成路由的代碼抽離成一個(gè)單獨(dú)的函數(shù)

// src/router/createRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
// 接受一個(gè)路由數(shù)組
const createRoute = (routes) => {
    return routes.map((route,index) => {
        return (
            <Route
                key={index}
                path={route.path}
                element={<route.component />}
                exact={route.exact}
            />
        )
    })
}
export default createRoute;

// src/App.jsx
import React, { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import routes from './router/index.js';
import createRoute from './router/createRoute.js'

function App() {
  return (
     <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {
              createRoute(routes)
          }
        </Routes>
     </Suspense>
  );
}

export default App;

配置路由中包含子路由

目錄結(jié)構(gòu)：

創(chuàng)建一個(gè)路由配置文件，其中定義了各個(gè)路由及其子路由的信息，使用懶加載來優(yōu)化性能

// src/router/index.js
import React from 'react';

const routes = [
    {
        path: '/',
        component: React.lazy(() => import('./views/Home')),
        exact: true,
    },
    {
        path: '/dashboard',
        component: React.lazy(() => import('./views/Dashboard')),
        children: [
            {
                path: 'users',
                component: React.lazy(() => import('./views/Users')),
            },
            {
                path: 'settings',
                component: React.lazy(() => import('./views/Settings')),
            },
        ],
    },
    {
        path: '/about',
        component: React.lazy(() => import('./views/About')),
    },
    {
        path: '/contact',
        component: React.lazy(() => import('./views/Contact')),
    },
];

export default routes;

動(dòng)態(tài)生成路由的方法，為了處理懶加載組件的加載狀態(tài)，需要添加<Suspense>組件

// src/router/createRoute.js
import React from 'react';
import { Route } from 'react-router-dom';
import { Suspense } from 'react'
const renderRoutes = (routes) => {
    return routes.map((route, index) => {
        // 當(dāng)前路由配置項(xiàng) route 包含 children 屬性，遞歸調(diào)用 renderRoutes 函數(shù)來處理子路由
        if (route.children) {
            return (
                <Route
                    key={index}
                    path={route.path}
                    element={
                        <Suspense>
                            <route.component />
                        </Suspense>
                    }
                    exact={route.exact}
                >
                    {renderRoutes(route.children)}
                </Route>
            );
        }
        return (
            <Route
                key={index}
                path={route.path}
                element={<route.component />}
                exact={route.exact}
            />
        );
    });
};
export default renderRoutes;

// src/main.jsx
import React from 'react'; // 用于創(chuàng)建組件的
import { createRoot } from 'react-dom/client'; // 用于渲染頁面的
import { Provider } from 'react-redux';
import store from './store/index.js';
import App from './App.jsx';
import { BrowserRouter} from 'react-router-dom';
createRoot(document.getElementById('root')).render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
      </BrowserRouter>
    </Provider>
)

// src/App.jsx
import React, { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import routes from './router/index.js';
import renderRoutes from './router/createRoute.js'

function App() {
  return (
     <Suspense>
        <Routes>
          {
              renderRoutes(routes)
          }
        </Routes>
     </Suspense>
  );
}

export default App;

為了在父組件中正確顯示子路由的內(nèi)容，需要在父組件中使用<Outlet>組件。<Outlet>組件用于渲染嵌套的子路由。

// src/views/Dashboard/index.jsx
import { Outlet,Link } from 'react-router-dom'
import React from 'react';
const Dashboard = () => {
    return (
        <>
            <h1>Dashboard 頁面</h1>
            <nav>
                <ul>
                    <li><Link to="/dashboard/users">Users</Link></li>
                    <li><Link to="/dashboard/settings">Settings</Link></li>
                </ul>
            </nav>
            <Outlet />
        </>
    )
}
export default Dashboard;