react学习Day2:安装配置路由

Myth丶恋晨 2023-02-25 07:07 10阅读 0赞

**一、react-dom和react-router-dom**  
React-router提供了一些router的核心api,包括Router,Route,Switch等,但是它没有提供dom操作进行跳转的api.

React-router-dom提供了BrowserRouter,Route,Link,Switch等api,可以通过dom的事件控制路由

**二、安装依赖**

npm install react-router-dom --save-dev

**三、App.js中引入路由**

import React from 'react';
    // 引入路由
    import {HashRouter, Switch, Route} from 'react-router-dom';
    // 登录页
    import Login from './pages/login/Login';
    // 首页
    import index from './pages/index';
    
    class App extends React.Component{
      constructor(props){
        super(props);
        this.state={};
      }
      render(){
        return(
          <HashRouter>
            <Switch>
              <Route exact component={Login} path='/' />
              <Route component={index} path='/index' />
            </Switch>
          </HashRouter>
        )
      }
    }
    
    export default App;

*  HashRouter:使用URL中的hash(\#)部分去创建路由,举例来说,用户访问(简单来说就是URL上会带\#号),访问地址会变成localhost:3000/\#/
 *  Switch:在路径相同情况下,只匹配第一个,这个可以避免重复匹配;
 *  exact:精准匹配

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 路由配置

> 使用 react-router-dom 配置路由安装 react-router-dom 安装 yarn add react-router-do

偏执的太偏执、/ 2023年07月09日 06:29/ 0 赞/ 25 阅读

相关 react学习Day2:安装配置路由

一、react-dom和react-router-dom React-router提供了一些router的核心api,包括Router,Route,Switch等,但是它没

Myth丶恋晨/ 2023年02月25日 07:07/ 0 赞/ 11 阅读

相关学习笔记——react路由配置

-------------------- > react中的路由配置是react项目中一个重要的功能。通过配置好的路由，我们可以实现不同组件的切换，进而实现单页面应用程序。

ゞ浴缸里的玫瑰/ 2022年11月22日 05:27/ 0 赞/ 146 阅读

相关 REACT_react路由配置

路由配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

向右看齐/ 2022年10月11日 00:56/ 0 赞/ 296 阅读

相关 React-router（2）路由嵌套

2、路由嵌套： > 参考 2.routingNested.js > > [DEMO地址][DEMO] 还是以[上一节][Link 1]上面那个 DEMO 为示例。

骑猪看日落/ 2022年05月30日 04:08/ 0 赞/ 239 阅读

相关 react-router路由配置

React路由传参，路由配置 const RouteConfig = [ { path: 'first',

亦凉/ 2022年05月24日 04:47/ 0 赞/ 351 阅读

相关 React路由配置使用

Router包安装: 安装包还是要打开命令行工具，使用npm来进行安装。 npm install --save react-router react-route

àì夳堔傛蜴生んèń/ 2022年01月07日 17:39/ 0 赞/ 276 阅读

相关 React 路由配置

转载https://blog.csdn.net/We\_jia/article/details/89353729\%E4%B8%80%E3%80%81%E8%B7%AF%E7%

╰半橙微兮°/ 2021年12月11日 10:49/ 0 赞/ 484 阅读

相关 react 路由安装配置方法

1.安装react-router-dom npm install react-router-dom --save-dev 2.创建一个router.js 引入路由

ゝ一纸荒年。/ 2021年07月25日 01:33/ 0 赞/ 657 阅读

相关 react 路由Link配置

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对

╰+哭是因爲堅強的太久メ/ 2021年07月24日 23:25/ 0 赞/ 586 阅读