React-Router笔记(第一天）

一. Defining Routes

1. 安装package：npm install react-router-dom 可以访问reactrouter.com去学习这个工具
2. 导入包

   
    import { createBrowserRouter，RouterProvider} from 'react-router-dom'

3. 调用createBrowserRouter函数：

createBrowserRouter([

     {path:'/',element:<HomePage/>},
     {}

])

5. 想要使用上述函数，我们必须用一个变量接收它的值： const router = createBrowserRouter()
6. RouterProvider 是一个组件，有一个router的props，必须携带一个由createBrowserRouter生成的router

<RouterProvider router ={router}/>

二. An Alternative Way Of Defining Routes

1. 导入包

import { createRoutersFromElements，createBrowserRouter，routerProvider } from 'react-router-dom'

2. 调用新引用的createRoutersFromElements函数

const routeDefinitions = createRoutesFromElements(
<Route>
    <Route path="/" element={<HomePage/>} />
    <Route path="/products" element={<ProductPage/>} />
</Route>
);

3. 调用createBrowserRouter函数

    const router = createBrowserRouter(routerDefinition)

4. 接下来的步骤和defining routes是一样的

三. Navigating between Pages With Links

1.引入包

import {Link} from 'react-router-dom';

2.例子

（这样可以阻止浏览器发送新的http请求如果链接被点击，但是url会被改变）

<Link to="/products"> the list of products </link>

四. Layouts&NestedRoutes

1. 这个部分是关于如何创建一个导航栏，我们可以创建一个导航栏组件，把导航栏组件加到每一个组件之上，但是我们通常不这么做，因为会重复很多遍。我们想要弄一个layout把其他的导航全部包裹起来，就是下面的RootLayout，这里还需要引入新的包(Outlet)。我们会创建一个新的导航，用slash nothing作为导航地址，新的layout作为element属性的值，把其他的layout作为children属性的值。这样就可以实现对老的layout的包裹。

2. 新的layout的代码

    import {Outlet} from 'react-router-dom'
    function RootLayout() {
        return <>
            <h1>Root Layout<h1/>
            <Outlet/> //这里是child router should be rendered to
        </>
    }

3. 新的createBrowserRouter代码

    const router =createBrowserRouter([
        {
            path:'/',
            element: <RootLayout/>,
            children: [ 
            {path:'/',element: <HomePage/>},
            {path:'/products',element: <ProductsPage />},
            ]
        }
    ])