模块化react-router配置方法详解

网络编程 2024/9/22 佚名

3 1 2

react-router模块化配置

因为公司的需要最近踏进了react坑，一直在挖坑填坑，在路由这一块折腾得不行。

直接进入主题，配置react-router模块化

1.先下载react-router-dom

npm install react-router-dom --save

2.在相应的文件引入react-router-dom相应的模块

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

3.在src子创建一个module目录，接着在module目录在创建一个router.js文件，用来配置路由。

//router.js
import Index from '../components/Index'
import New from '../components/New'
  import NewList from '../components/NewList'
  import NewContent from '../components/NewContent'
  
const routes = [
  
  {
    path:"/",
    component:Index,
    exact:true
  },
  {
    path:"/new",
    component:New,
    routes:[
      {
        path:"/new/",
        component:NewContent
      },
      {
        path:"/new/newList",
        component:NewList
      }
    ]
  },
  
]

export default routes

4.在app.js根目录添加相应的跳转路径。

//app.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import router from "./modules/routers"

function App() {
 return (
  <Router>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/new">新闻</Link>
          </li>
        </ul>
      </nav>
      {
        router.map((router,index)=>{
          
            if(router.exact){
              
              return <Route exact key={index} path={router.path}
                render = {
                  props =>(
                    <router.component {...props} routes = {router.routes}/>
                  )
                }
              />
              
            }else{
              
              return <Route key={index} path={router.path}
                render = {
                  props =>(
                    <router.component {...props} routes = {router.routes} />
                  )
                }
              />
              
            }
          
        })
      }
    </Router>
 );
}

export default App;

注意点：嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据，重要的事情说三篇

解析一下，<Route/>里面的render,这是官方给出的一种固定写法，为了解决父路由传递数据给子路由接受不到的问题。render是一个对象，里面是一个箭头函数，箭头函数放回<router.component {...props} routes = {router.routes} />一个标签，router.component的router对于的是你map传进来的那个形参，传啥写啥；component 是配置文件对应的component ，routes 是传给子路由的数据、（子路由通过this.props.routes 接收）

5.在有子路由的页码配置跳转

import React ,{Component} from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class New extends Component{
  
  render(){
    
    return(
      
      <div className="box">
        <div className="left">
          <ul>
            <li>
              <Link to="/new">New</Link>
            </li>
            <li>
              <Link to="/new/newList">NewList</Link>
            </li>
          </ul>
        </div>
        <div className="right">
          {
            this.props.routes.map((item,index)=>{
              
              return <Route key={index} exact path={item.path} component={item.component}></Route>
              
            })
          }
        </div>
      </div>
      
    )
    
  }
  
}

export default New

最后的结果为：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

模块化react-router配置,react-router配置

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“模块化react-router配置方法详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

模块化react-router配置方法详解

深入理解JS异步编程-Promise

react 组件传值的三种方法

评论“模块化react-router配置方法详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接