脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → react router

react router零基础使用教程

 更新时间：2022年09月26日 17:04:23   作者：十九（一拖再拖）  
React-Router 路由库，是官方维护的路由库，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到

安装

既然学习 react router 就免不了运行 react

安装 react

npx create-react-app my-app
cd my-app
npm start

安装 react router

npm install react-router-dom

如果一切正常，就让我们打开 index.js 文件。

配置路由

引入 react-router-dom 的 RouterProvider

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

设置

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={routers}></RouterProvider>
  </React.StrictMode>
);

这里的 React.StrictMode 代表以严格模式执行其包含的内容。

为了管理路由，让我们再创建一个 root.js 文件

内容如下：

文件：router.js

import {createBrowserRouter} from 'react-router-dom'
import App from '../App.js'
const router =  createBrowserRouter ([
    {
        path:'/',
        element:<App />,
    }
])
export default router;

添加一个新页面测试路由

新建文件：

test.js

export default function Test(){
    return(
        <div>测试页面</div>
    )
}

在 router.js 引入

import {createBrowserRouter} from 'react-router-dom'
import App from '../App.js'
import Test from '../test.js'
const router =  createBrowserRouter ([
    {
        path:'/',
        element:<App />,
    }，
    {
        path:'/test',
        element:<Test />
    }
])
export default router;

保存

在浏览器访问 http://localhost:3000/test

你应该可以看到：

配置未找到的路由

现在我们有 App.js 和 test.js 两个页面，如果访问 http://localhost:3000/hello 会出现什么呢？

这是内置的页面，提醒用户没有找到页面。

接下来使用美化或者自定义的页面：

创建文件：

error.js

export default function Error(){
    return (
        <h1>Page not found</h1>
    )
}

使用 errorElement属性 对应这个页面：

import {createBrowserRouter} from 'react-router-dom'
import App from '../App.js'
import Test from '../test.js'
import Error from '../error.js'
const router =  createBrowserRouter ([
    {
        path:'/',
        element:<App />,
        errorElement:<Error />
    },
    {
        path:'/test',
        element:<Test />
    }
])
export default router;

继续请求 http://localhost:3000/hello

我们刚才自定义的页面成功展示出来了。

跳转页面

跳转页面有很多，这里取两种方式，一是通过 dom 标签，二是通过js

通过 js

使用 useNavigate 跳转页面：

看起来就像这样：

test.js

import { useNavigate } from "react-router-dom";
function Test () {
    const navigate = useNavigate();
    function toTest2(){
        navigate("/test2",{
            state:'anny'
        });
    }
    return(
        <div onClick={toTest2}>跳转页面</div>
    )
}
export default Test

使用 useLocation 接收值：

import {useLocation} from 'react-router-dom'
export default function Test2(){
    let location = useLocation();
    return (
        <div>页面Test2 接收到的值为 {location.state}</div>
    )
}

通过 dom

通过 Link 传值跳转：

import {Link } from "react-router-dom";
function Test () {
    return(
        <div>
            <Link to="/test2" state={'anny'} >跳转页面</Link>
        </div>
    )
}
export default Test

使用 useLocation 接收值：

import {useLocation} from 'react-router-dom'
export default function Test2(){
    let location = useLocation();
    return (
        <div>页面Test2 接收到的值为 {location.state}</div>
    )
}

嵌套页面

平时写管理后台，经常会看到左右分布的布局，如果仅仅依靠 1-5 节的内容肯定很难实现，接下来看一下 根布局。

根布局使用 :

创建一个 父页面，父页面放置两个 链接：

parent.js

import { Link, Outlet } from "react-router-dom";
function Parent(){
    return(
       <div>
        <Link to={'/parent/page1'}>show page1</Link>
        <Link to={'/parent/page2'}>show page2</Link>
        <Outlet></Outlet>
       </div>
    )
}
export default Parent;

继续创建 两个页面 page1.js page2.js

page1.js

function Page1(){
    return(
        <div>i am page1</div>
    )
}
export default Page1;

page2.js

function Page2(){
    return(
        <div>i am page2</div>
    )
}
export default Page2;

修改我们的 router.js 文件：

import {createBrowserRouter} from 'react-router-dom'
import App from '../App.js'
import Test from '../test.js'
import Error from '../error.js'
import Parent from '../parent.js'
import Page1 from '../page1.js'
import Page2 from '../page2.js'
const router =  createBrowserRouter ([
    {
        path:'/',
        element:<App />,
        errorElement:<Error />,
    },
    {
        path:'/test',
        element:<Test />
    },
    {
        path:'/parent',
        element:<Parent />,
        children:[
            {
                path:'/parent/page1',
                element:<Page1 />
            },
            {
                path:'/parent/page2',
                element:<Page2 />
            }
        ]
    }
])
export default router;

到这里还差一步，就是使用重要的标签 <Outlet>

修改我们的父页面

parent.js

import { Link, Outlet } from "react-router-dom";
function Parent(){
    return(
       <div>
        <Link to={'/parent/page1'}>show page1</Link>
        <Link to={'/parent/page2'}>show page2</Link>
        <Outlet></Outlet>
       </div>
    )
}
export default Parent;

保存：

接下来访问 http://localhost:3000/parent 你将看到：

分别点击 show page1 和 show page2 你将看到不同的效果。

如果你想将第一个子组件默认展示出来，你可以将 router.js 改成如下：

    {
        path:'/parent',
        element:<Parent />,
        children:[
            {
                path:'/parent',
                element:<Page1 />
            },
            {
                path:'/parent/page2',
                element:<Page2 />
            }
        ]
    }

再看一下效果：

到此这篇关于react router零基础使用教程的文章就介绍到这了,更多相关react router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue后台管理系统权限控制与动态路由的实现

    Vue后台管理系统权限控制与动态路由的实现

    本文主要介绍了Vue后台管理系统权限控制与动态路由的实现,可以根据用户的角色灵活控制页面访问权限,提高系统的安全性和用户体验,感兴趣的可以了解一下
    2025-04-04
  • vue单向数据流的深入理解

    vue单向数据流的深入理解

    随着前端的项目的越来越复杂,出现了一堆概念来降低开发的复杂性,单向数据流就是其中一个,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • vue将毫秒数转化为正常日期格式的实例

    vue将毫秒数转化为正常日期格式的实例

    今天小编就为大家分享一篇vue将毫秒数转化为正常日期格式的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解Element-UI中上传的文件前端处理

    详解Element-UI中上传的文件前端处理

    这篇文章主要介绍了详解Element-UI中上传的文件前端处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue的缓存方法示例详解

    Vue的缓存方法示例详解

    这篇文章主要给大家介绍了关于Vue缓存方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue如何实现el-select下拉选项的懒加载

    vue如何实现el-select下拉选项的懒加载

    这篇文章主要介绍了vue如何实现el-select下拉选项的懒加载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vscode配置@路径提示方式,并解决vue文件内失效的问题

    vscode配置@路径提示方式,并解决vue文件内失效的问题

    这篇文章主要介绍了vscode配置@路径提示方式,并解决vue文件内失效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题

    这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue.js通过自定义指令实现数据拉取更新的实现方法

    vue.js通过自定义指令实现数据拉取更新的实现方法

    数据拉取更新这个功能相信大家基本都见过，但是如果要做起来却不止如何做起，所以这篇文章给大家分享了vue.js通过自定义指令实现的方法，阅读本文需要对vue有一定理解，有需要的朋友们下面来一起看看吧。
    2016-10-10

最新评论