REACT_react中如何使用路由

╰半夏微凉° 2023-03-03 06:19 96阅读 0赞

*  注意：使用路由必须引入路由标签，并且使用 标签包裹

1.安装路由

*  npm install react-router-dom --save

2.新建文件  
/src/routes.js

import React,{ Component} from 'react';
    import { BrowserRouter as Router, Route} from 'react-router-dom'
    
    //导入组件
    import Home from './home/index'
    import Login from './login/index'
    
    //exact 精确匹配
    class Routes extends Component { 
        render(){ 
          return (
            <Router>
                <div>
                    <Route path='/login' component={ Login} ></Route>
                    <Route exact path='/index' component={ Home} ></Route>
                </div>
            </Router>
          )
        }
      }
      export default Routes;

3.引入  
/src/index.js文件中

import Routes from './routes'		//引入路由文件
    
    ReactDOM.render(
      <React.StrictMode>
        <Routes  />						//修改成路由组件
      </React.StrictMode>,
      document.getElementById('root')
    );

4.使用

*  js中跳转

有些场景下，重复使用push或a标签跳转会产生死循环，所以官方提供有replace

this.props.history.push('/index')
    this.props.history.replace('/login')

获取方式  
this.props.match

导入方式：  
routes.js

inport { 
    	BrowserRouter as Router,
    	Route,		//这是基本的路由快
    	Link,		//这是a标签
    	Switch		//这是监听空路由的
    	Redirect	//这是重定向
    	Prompt		//防止转换
    } from 'react-router-dom'

发表评论取消回复

表情：

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

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

相关阅读

相关如何在 vanilla javascript 中实现 URL 哈希路由路由

在这篇文章中，我将向您展示如何在不到 30 行代码的情况下，在不使用 angular、vue、react、ember 等任何繁重的框架的情况下，在 vanilla JavaSc

太过爱你忘了你带给我的痛/ 2023年10月01日 18:52/ 0 赞/ 89 阅读

相关 95 - 在Flask中如何使用动态路由

1. 静态路由和动态路由有什么区别？路由 Utl Path http://loaclhost/abc/test.html

冷不防/ 2023年07月20日 13:54/ 0 赞/ 46 阅读

相关 REACT_react中如何使用路由

注意：使用路由必须引入路由标签，并且使用标签包裹 1.安装路由 npm install react-router-dom --save 2.新建文件 /

╰半夏微凉°/ 2023年03月03日 06:19/ 0 赞/ 97 阅读

相关 VUE_vue中如何使用路由

1.npm安装vuex > npm install vue-router --save-dev 2.文件 > 在项目根目录 router/index.js 3.配置路由

今天药忘吃喽~/ 2023年02月27日 05:45/ 0 赞/ 219 阅读

相关 Vue中路由嵌套（子路由）

路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。根据我们前面学习的VueRouter的知识，可以直接写出代码来实

野性酷女/ 2022年12月25日 15:56/ 0 赞/ 384 阅读

相关 vue 子路由如何调用父路由中的方法

在开发项目中遇到了这么个问题，因为在父路由界面中有部分是子路由的内容，而问题是子路由的操作完成后需要调用父路由的一个方法来改变父路由中的样式。如果是组件的话，那么就简单很多了，

我就是我/ 2022年12月20日 12:36/ 0 赞/ 356 阅读

相关 Django中如何实现数据库路由？

　　虽然我们提供了数据库的信息，它知道怎么连接数据库，但问题是我们保存里面有很多模型，它不知道哪个模型存到哪个数据库。这就要求我们自己来指定，也就是我们自己来实现一个数据库路由

ゝ一纸荒年。/ 2022年09月27日 16:17/ 0 赞/ 210 阅读

相关 koa路由使用

其实，router这个是一个很重要的内容，用户进行url访问就可以更好的使用不用router中间件 app.use(async (ctx,next)=>{

超、凢脫俗/ 2022年04月22日 16:20/ 0 赞/ 324 阅读

相关 Vue路由使用

Vue路由使用１．App.vue写上　＜router-view＞这句话是会去找当前路由下的内容（根据url），该去找路由配置项了－＞ ![70][] ２．/router

冷不防/ 2021年10月09日 04:24/ 0 赞/ 486 阅读

相关 Vue路由（嵌套路由）的使用

1、vue-router介绍 vue-router是Vue.js的路由插件。适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。路径

￡神魔★判官ぃ/ 2021年09月20日 09:08/ 0 赞/ 712 阅读