react-7 react-router-dom 的简单使用(2)

本文详细介绍了在React项目中实现多页面路由的方法,包括项目搭建、页面组件创建及路由配置过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前,我们尝试了类似 tab选项卡功能的路由学习;

现在我们来看下基本的各个页面间的路由的实现;

下面实现一个基础的四个页面的项目的路由的处理:

 

我们默认进入首页 home, 也就是访问根目录的时候进入home 页面;

当我们在地址栏中输入 /Intro 的时候,我们进入介绍页面;

当我们在地址栏中输入/Func 的时候,我们进入功能页面;

当我们在地址栏中输入/Show 的时候,我们进入展示页面;

 

 

第一步: 使用 create-react-app 创建一个测试的项目,我在 f 盘下面创建了react-app-delete 目录,然后再这个

                react-app-delete 目录下使用命令 create-react-app my-app-do  创建my-app-do 这个测试项目;

我们按照上面的提示,先使用命令 cd my-app-do   进入我们创建的 my-app-do 项目;

再使用命令 npm start 启动这个项目,我们 可以看到浏览器中正常启动即可,项目没有问题;

 

第二步: 使用 create-react-app 命令创建的项目本身有默认的显示的页面,所以我们需要修改下;

               我们先打开项目my-app-do,生成的默认的项目的首页是通过 src/index.js 文件渲染的 App.js;

                也就是说这个默认生成的首页是 src/App.js 文件,这个文件通过 src/index.js 挂载到 public 

                  下的Index.html中;

                                               

              我们舍弃这个默认生成的页面 src/App.js 

              然后我们首先在 src 目录下创建 Pages 目录,用来放置几个新加的页面;

 

              我们在Pages下创建一个首页的 home 组件,也就是首页的页面,

               创建一个简介组件 intro;  

               再创建一个功能组件 func ,

               最后创建一个展示组件 show;

                几个需要跳转的页面写好了,再增加一个路由的组件,用来实现项目的路由,在src目录下

               创建 Router目录,增加 Router目录中创建 router.js文件;

               上面目录和文件创建完成之后的项目目录结构如下:

                                                 

                        上面新增文件和代码如下:

1. func.js

import React from 'react';
import './func.css';

export default class Func extends React.Component {
    render(){
        return(
            <div>我是功能页面</div>
        )
    }
}

2.home.js

import React from 'react';
import './home.css'


export default class Home extends React.Component {
    render(){
        return(
            <div>我是首页文件</div>
        )
    }
}

3.intro.js

import React from 'react';
import './intro.css';

export default class Intro extends React.Component {
    render(){
        return(
            <div>我是简介页面</div>
        )
    }
}

4.show.js

import React from 'react';
import './show.css';

export default class Show extends React.Component {
    render(){
        return(
            <div>我是展示的页面</div>
        )
    }
}

其余的样式文件都是空,func.css   home.css   intro.css  show.css  ,我在每个组件的页面中只是添加了一句话,

所以没有设置任何的样式,你可以自己设置相应的样式即可;

 

5.router.js

import React from 'react';
import {BrowserRouter as Routerme, Route, Link, Switch} from "react-router-dom";
import Home from '../Pages/Home/home';
import Intro from '../Pages/Intro/intro';
import Func from '../Pages/Func/func';
import Show from '../Pages/Show/show';

export default class Router extends React.Component {
    render(){
        return(
            <Routerme>
                <Switch>
                    <Route exact={true} path="/" component={Home}></Route>
                    <Route path="/Intro" component={Intro}></Route>
                    <Route path="/Func" component={Func}></Route>
                    <Route path="/Show" component={Show}></Route>
                </Switch>
            </Routerme>
        )
    }
}

上面就是我们需要增加的文件;

 

除了上面增加的文件,我们还需要修改一下 src/index.js 文件;

默认生成的项目默认渲染了 App 这个组件作为显示的页面,我们现在把我们写好的路由组件 Router 作为渲染的对象;

也就是 React.DOM  的对象改为 <Router/.>组件就可以了;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Router from './Router/router';
import * as serviceWorker from './serviceWorker';

// ReactDOM.render(<App />, document.getElementById('root'));   原先的代码
ReactDOM.render(<Router/>,document.getElementById('root'));     

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

 

做完上面的工作;

我们在浏览器中可以看到地址栏是:http://localhost:3000/   ,显示的内容是:我是首页文件

我们修改地址栏:http://localhost:3000/intro  ,显示的内容是:我是简介页面

其余的页面也是同理;

 

上面的路由实现了默认显示首页,然后我们修改路由地址可以改变显示的页面;

下一篇我们尝试默认显示首页,然后在首页中点击跳转相应的页面的处理;

### 反应路由器域与反应路由器的区别 #### 历史背景与发展 `react-router-dom` 是 `react-router` 的特定实现之一,专门用于浏览器环境中的React应用程序。随着Web开发的发展和技术栈的变化,路由库也经历了迭代更新以适应新的需求和最佳实践。 #### 主要差异点 ##### 1. 环境适配性 `react-router-dom` 特定于DOM环境中运行的应用程序,提供了针对HTML5历史API的支持以及链接处理等功能[^1]。相比之下,`react-router` 更像是一个抽象层,可以被不同平台的具体实现在之上构建,比如服务器端渲染(SSR),原生移动应用等场景下的变体如 `react-router-native`。 ##### 2. 组件集合的不同 两者都提供核心的路由管理功能,但在具体组件上有所区分: - **Link**: 在 `react-router-dom` 中存在 `<Link>` 组件来创建可点击的超链接,而在更通用版本里可能不存在此预定义组件。 - **BrowserRouter 和 HashRouter**: 这些是专门为客户端web页面设计的历史对象封装器,在 `react-router-dom` 提供了这两种方式让用户选择如何管理和同步URL状态变化;而基础版则不直接涉及这些概念[^2]. ```jsx import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> {/* 路由配置 */} </Router> ); } ``` ##### 3. API 设计哲学上的微调 虽然二者遵循相同的总体设计理念——即通过声明式的语法描述UI应该如何响应不同的路径匹配情况——但是在某些细节方面还是有细微差别。例如对于动态参数解析、嵌套路由支持等方面可能会有不同的表现形式或额外特性加入到 `react-router-dom` 当中去更好地服务于前端开发者的需求[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值