react-router(V6)配置路由的两种方式BrowseRouter组件式和createBrowseRouter函数式

背景：前端项目都离不开前端路由，react-router第三方库为我们提供了配置前端路由的统一解决方案，其中就有两种方式

方式一：组件式

　　1.BrowseRouter、Routes、Route三个组件搭配使用

　　2.示例如下。然后将App组件引入到index.tsx文件中

function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /app/ */}
      </Routes>
    </BrowserRouter>
  );
}

方式二：函数式（更受人喜爱的方式！！！，官网原话：https://reactrouter.com/en/main/start/tutorial#jsx-routes）

　　1.createBrowseRouter()函数、createRoutesFromElements()函数、RouterProvider组件、Route组件搭配使用

　　2.示例如下。定义好路由后，使用RouterProvider组件渲染路由组件

const router= createBrowserRouter(
  createRoutesFromElements(
    <Route
      path='/'
      // TODO: 编写Home组件
      element={<Home />}
    >
      <Route errorElement={<ErrorBounds />}>
        <Route
          index
          element={<ArticalList />}
        /> 
        <Route
          path='articalList'
          element={<ArticalList />}
        /> 
        <Route 
          path='articalDetail/:articalId'
          element={<ArticalDetail />}
        />
        <Route 
          path='personal'
          element={<Personal />}
        >
          <Route 
            path='favorite'
            element={<Favorite />}
          />
        </Route>
        <Route path='/*' element={<ErrorBounds />} />
      </Route> 
    </Route>
  )
);

　const root = ReactDOM.createRoot(

  　document.getElementById('root') as HTMLElement

　);

　root.render(

  　<React.StrictMode>

    　<Suspense fallback={<div>正在加载中...</div>}>

      　<RouterProvider router={router} />

    　</Suspense>

  　</React.StrictMode>

　);

 

注!!!：BrowseRouter、Routes不能和createBrowseRouter()、RouterProvide一起使用，会报错： [BrowseRouter] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>