怎么推广小程序_模块化react

模块化react-router配置方法详解       这篇文章主要介绍了模块化react-router配置方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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" 
 Link to="/" 首页 /Link 
 /li 
 Link to="/new" 新闻 /Link 
 /li 
 /ul 
 /nav 
 router.map((router,index)= {
 if(router.exact){
 return Route exact key={index} path={router.path}
 render = {
 pro凡科抠图 = (
 ponent {...pro凡科抠图} routes = {router.routes}/ 
 }else{
 return Route key={index} path={router.path}
 render = {
 pro凡科抠图 = (
 ponent {...pro凡科抠图} routes = {router.routes} / 
 /Router 
export default App;

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

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

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

解析一下, Route/ 里面的render,这是官方给出的一种固定写法,为了解决父路由传递数据给子路由接受不到的问题。render是一个对象,里面是一个箭头函数,ponent {...pro凡科抠图} routes = {router.routes} / ponent ,routes 是传给子路由的数据、(子路由通过this.pro凡科抠图.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" 
 Link to="/new" New /Link 
 /li 
 Link to="/new/newList" NewList /Link 
 /li 
 /ul 
 /div 
 div className="right" 
 this.pro凡科抠图.routes.map((item,index)= {
 return Route key={index} exact path={item.path} component={ponent} /Route 
 /div 
 /div 
export default New

最后的结果为:


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


相关阅读