React-router之简单使用

1.概念

说明：页面的跳转

2.安装

说明：路由采用CRA创建项目的方式进行基础环境配置。

npx create-react-app react-router-pro

npm i react-router-dom

3.使用

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import reportWebVitals from './reportWebVitals';
// 导入路由方法
import {createBrowserRouter,RouterProvider} from "react-router-dom"

// 创建路由
const router=createBrowserRouter(
  [
    {
      path:"/login",
      element:<div>我是登录页</div>
    },
    {
      path:"/home",
      element:<div>我是home页</div>
    }
  ]
)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
{/* 路由绑定 */}
   <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4.页面

5.规范文件

说明：分为三步走。

 5.1创建路由文件 

说明：以下创建了home路由页面，以此类推创建login页面。

const Home=()=>{
    return <div>我是home页面</div>
}
export default  Home

 5.2创建路由index.js

说明:使用React Router库来创建路由的示例。它导入了两个组件：Login和Home，并使用createBrowserRouter函数创建了一个路由对象。

import Login from "../page/Login";
import Home from "../page/Home";


import {createBrowserRouter} from "react-router-dom"


const router=createBrowserRouter([
    {
        path:"/login",
        element:<Login></Login>
    },
    {
        path:"/home",
        element:<Home></Home>
    }
]
)

export default router

5.3 使用

说明：导入路由对象进行路由绑定。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import reportWebVitals from './reportWebVitals';
// 导入路由方法
import {RouterProvider} from "react-router-dom"

import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
{/* 路由绑定 */}
   <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();