ReactRouter

ReactRouter

1.安装

npm install --save react-router-dom

2.使用
return (
        <Router>
            {/* ul内部的相当于是导航栏  <Route></Route>才是跳转语句 */}
            {/* 每个Route都需要一个path属性,path属性是一个url,当url匹配一个Route时,
            这个Route中component中定义的组件就会被渲染出来。 */}
            {/* exact是精确匹配:地址必须是localhost:3000/才能进入首页,/aaa这种包含/的不能进入 */}
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/list/123">列表</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/list/:id"  component={List}></Route>
            <Route path="/home/"  component={Home}></Route>
        </Router>
    )
标签嵌套在导航栏内,表明跳转地址。

而标签指明对应组件的地址是什么,比如这句话的意思就是如果跳转的地址是"/",那么就渲染Index组件到页面上去。

格式为

exact表示精确匹配,即地址必须和指定的完全一样才能跳转。

3.动态传值

Router动态传值步骤:

  1. 设置规则

    设置规则格式为:id,即:+key,例如:

    <Route path="/list/:id" component={List} />
    
  2. 传递值

    在Link标签上直接传值:

     <li><Link to="/list/123">列表</Link> </li>
    
  3. 接收值

    组件接收传递过来的值的时候,可以在声明周期componentDidMount中进行,传递的值在this.props.match中:

    componentDidMount() {
            console.log(this.props)
            let tempId = this.props.match.params.id
            this.setState({
                id:tempId
            })
        }
    
  4. 显示内容

    render() { 
            return ( 
            <h2>List-page->{this.state.id}</h2>
             );
    }
    
4.动态传值2

在平常页面中最常见的路由(动态传值)就是文章的列表页和详细页面,即点击文章的标题就可以跳转到文章的详情页面去查看文章。

首先在Index组件中的构造器中构造出初始数据,列表数组,就相当于从后台获取到的数据:

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'小明的个人博客-1'},
            {cid:456,title:'小明的个人博客-2'},
            {cid:789,title:'小明的个人博客-3'},
        ]
    }
}

然后修改一下UI页面使得文章呈列表显示:

 render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

接下去进行路由配置:

先引入Link

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

然后编写路由:

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.cid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}
5.重定向

要实现的功能是当进入Index组件时,然后Index组件直接重定向到Home组件。

先随便生成一个Home组件:

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}

export default Home;

然后在AppRouter.js里加一个<Route>配置,配置时记得要先引入Home组件:

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

标签式重定向:

要实现重定向,需要先在Index.js组件中引入Redirect

import { Link , Redirect } from "react-router-dom";

引入之后直接在render中使用:

 <Redirect to="/home/" />

编程式重定向:

在构造器中,当组件一渲染的时候就利用JS进行重定向:

constructor(props) {
        super(props);
        this.state = { 
            list:[
                //list中的每一行都是一个对象,具有cid和title两个属性
                {cid:123,title:'小明的个人博客-1'},
                {cid:456,title:'小明的个人博客-2'},
                {cid:789,title:'小明的个人博客-3'}
            ]
         }
         this.props.history.push("/home/")
    }
6.ReactRouter嵌套路由

嵌套路由就是网页中常见的具有一级导航菜单和二级导航菜单的页面,内容随着菜单的不同选择而变化。

首先新建一个Approuter.js作为首页:

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

接着在src目录下新建一个pages文件夹作为一级子菜单文件夹,然后在里面新建videoworkplace这两个文件夹作为视频教程和职场技能的文件夹。

然后在index.js中引入Approuter.js并进行渲染:

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


ReactDOM.render(<AppRouter />, document.getElementById('root'));

为了效果更佳美观,可以在src目录下新建index.css设计样式:

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;

}

然后可以在videoworkplace这两个文件夹中新建几个子页面用于内容显示。例如ReactPage.js

import React from "react";
function Reactpage(){
    return (<h2>我是React页面</h2>)
}
export default Reactpage;

接下去就是二级导航页面video.js

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;

然后将二级导航页面引入到主页面,即一级导航页面:

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
					// 引入二级导航
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                // 引入二级导航
                <Route path="/video/"   component={Video} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

美化页面(添加在index.css中):

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

职场技能的二级导航菜单同理

WorkPlace.js

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/Getup">程序员早起攻略</Link></li>

                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />

            </div>
        </div>
    )
}
export default WorkPlace;
7.后台动态获取路由配置

模拟后台得到的JSON数据,在AppRouter.js文件里,模拟从后台得到了JSON字符串,并转换为了对象:

let routeConfig =[
    {path:'/',title:'博客首页',exact:true,component:Index},
    {path:'/video/',title:'视频教程',exact:false,component:Video},
    {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]

此时一级导航就不能写死,应该对数据进行遍历:

<ul>
    {
        routeConfig.map((item,index)=>{
            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
        })
    }
</ul>

按照上面一样把Route遍历配置:

{
    routeConfig.map((item,index)=>{
        return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
    })
}

AppRouter.js全部代码:

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;
<think>好的,我现在要介绍一下 React Router。首先,我需要明确用户的需求,他们可能想了解React Router的基本概念、用途以及如何在项目中使用。接下来,我应该组织内容的结构,确保信息有条理,容易理解。 首先,React Router是一个用于React应用的路由库,所以需要解释路由在单页面应用(SPA)中的作用。用户可能不太清楚SPA和传统多页面应用的区别,这里需要简单说明。然后,提到React Router的核心功能,比如管理URL和组件的映射关系,实现无刷新页面切换。 接下来,需要介绍React Router的版本。目前常用的是v6版本,所以应该重点讲解v6的API和变化。比如,从之前的Switch组件过渡到Routes组件,以及Route组件的新用法。同时,要提到常用组件如BrowserRouter、Link、Navigate等,并解释它们的作用。 然后,安装方法是一个基本点,需要给出npm或yarn的安装命令,方便用户直接使用。同时,给出一个简单的代码示例,展示如何配置路由,这样用户能更直观地理解。例如,创建一个包含主页和关于页面的路由配置。 还需要注意动态路由和嵌套路由的介绍,这些是实际开发中常用的功能。动态路由可以通过参数传递,比如/users/:id,而嵌套路由则允许在父组件内渲染子组件,适用于复杂的布局结构。 另外,编程式导航也是一个重要部分,比如使用useNavigate钩子进行页面跳转,相比之前的useHistory,v6版本有所变化,需要指出这点差异,避免用户混淆。 最后,总结React Router的优势,比如保持UI与URL同步,提升用户体验,以及它在React生态系统中的地位。可能还要提到官方文档和社区资源,供用户进一步学习。 在写作过程中,要确保使用正确的中文表达,避免技术术语使用不当。同时,按照系统要求,所有行内数学表达式用$...$格式,但在这个问题中可能用不到数学公式,所以主要关注代码块和术语的正确格式。检查是否有拼写错误或语法问题,保持回答的准确性和流畅性。 可能还需要考虑用户的实际应用场景,比如他们是否在构建一个需要多个页面的React应用,或者是否需要处理认证后的重定向等问题。因此,适当提及保护路由、重定向等高级用法会更有帮助,但作为介绍,保持基础内容的完整性更重要。 总之,结构应该是:定义React Router,核心功能,安装方法,基本用法示例,主要组件介绍,动态和嵌套路由,编程式导航,总结优势,最后推荐学习资源。确保每个部分简洁明了,逐步引导用户理解React Router的使用和重要性。</think>React Router 是用于 React 应用程序的**路由管理库**,它通过管理 URL 与组件的映射关系,帮助构建单页面应用(SPA)的多页面导航体验。以下是关键要点: --- ### 一、核心功能 1. **URL 与组件映射** 将 URL 路径(如 `/about`)与 React 组件绑定,实现无刷新页面切换。 2. **动态路由** 支持参数化路径(如 `/users/:id`),通过 `useParams()` 获取参数: ```jsx const { id } = useParams(); // 获取 /users/123 中的 id=123 ``` 3. **嵌套路由** 在父组件内定义子路由,实现复杂布局: ```jsx <Route path="/dashboard" element={<Dashboard />}> <Route path="stats" element={<Stats />} /> // 匹配 /dashboard/stats </Route> ``` --- ### 二、核心组件 1. **`<BrowserRouter>`** 包裹整个应用,提供 HTML5 History API 支持: ```jsx import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); ``` 2. **`<Routes> 与 <Route>`** - v6 版本用 `<Routes>` 替代旧版 `<Switch>` - `<Route>` 定义路径与组件的映射: ```jsx <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ``` 3. **`<Link>`** 替代 `<a>` 标签实现无刷新导航: ```jsx <Link to="/about">关于我们</Link> ``` 4. **`<Navigate>`** 重定向到指定路径: ```jsx <Route path="/old" element={<Navigate to="/new" />} /> ``` --- ### 三、编程式导航 通过 `useNavigate` 钩子实现 JS 控制跳转: ```jsx import { useNavigate } from 'react-router-dom'; function Login() { const navigate = useNavigate(); return ( <button onClick={() => navigate('/dashboard')}>登录后跳转</button> ); } ``` --- ### 四、安装与版本 1. **安装** 适用于 React v16.8+: ```bash npm install react-router-dom@6 ``` 2. **版本差异** - v6 简化了 API(如用 `element` 替代 `component`) - 嵌套路由配置更直观 --- ### 五、典型应用场景 1. 根据 URL 显示不同页面组件 2. 实现带参数的详情页(如 `/product/:id`) 3. 权限控制(未登录重定向到登录页) 4. 404 页面处理: ```jsx <Route path="*" element={<NotFound />} /> ``` --- ### 六、优势 - 保持 UI 与 URL 同步 - 支持浏览器前进/后退操作 - 轻量级(gzip 后仅约 6KB) 官方文档:[reactrouter.com](https://reactrouter.com/) 建议通过实际项目练习路由配置、动态参数传递和权限验证场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

偶尔躲躲乌云_0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值