ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react-router-dom路由switch使用详解

2021-09-08 23:03:57  阅读:167  来源: 互联网

标签:React dom react switch router import 路由


简介

 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。    本文主要针对react-router-dom进行说明。

 

 <Switch>是唯一的因为它仅仅只会渲染一个路径。相比之下(不使用<Switch>包裹的情况下),每一个被location匹配到的<Route>将都会被渲染。

安装

首先进入项目目录,使用npm安装react-router-dom:

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

基本操作

然后我们新建两个页面,分别命名为“home”和“detail”。在页面中编写如下代码:

复制代码
import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>去detail</a>
            </div>
        )
    }
}
复制代码

 

home.js

import React from 'react';


复制代码
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a>回到home</a>
            </div>
        )
    }
}
复制代码

 

detail.js

然后再新建一个路由组件,命名为“Router.js”,并编写如下代码:

复制代码
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';


const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/detail" component={Detail}/>
        </Switch>
    </HashRouter>
);
export default BasicRoute;
 
复制代码

 

如上代码定义了一个纯路由组件,将两个页面组件Home和Detail使用Route组件包裹,外面套用Switch作路由匹配,当路由组件检测到地址栏与Route的path匹配时,就会自动加载响应的页面。

 

然后在入口文件中——我这里指定的是index.js——编写如下代码:

复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);
复制代码

 

这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果,在地址栏输入“http://localhost:3000/#/”:


 

 输入“http://localhost:3000/#/detail”:

 

如果不使用 switch 

两个组件都打印

标签:React,dom,react,switch,router,import,路由
来源: https://www.cnblogs.com/karajanking/p/15244982.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有