react中路由-嵌套路由-动态生成路由

react中路由-嵌套路由-动态生成路由

react的路由 卡了一上午，我的理想化出来了

react-router-dom它分为一下几种情况：

• BrowserRouter 启动history模式的路由
• Route 路由本由，通过path进行组件的渲染
• Redirect 重定向路由 通过to属性进行反杀
• Switch 当匹配到第一个路径相符合的路由的时候就不会往下找了
• Link 类似于a标签进行路由导向
• navLink 也是会生成a标签进行连接，跟link有差别 但是我还没有探究
• 。。。。还有一些其他的方法没有探究

需求描述

import home from 'pages/Home.jsx'
import record from 'pages/Record.jsx'
import feedBack from 'pages/FeedBack.jsx'
import Children from "pages/Children.jsx";
const router = [
    {
        path:'/record',
        component:record
    },
    {
        path:'/',
        component:home,
        redirect:'/feedBack',
        children:[
            {
                path:'/feedBack',
                component:feedBack
            },
            {
                path:"/children",
                component:Children 
            }
        ]
    },
]
//如果熟悉vue的小伙伴会明白想干什么，主要是在/路径下生成home但是匹配到/之后会重新定义到/feedBack路径上去，此时的home和feedBack组件是共存的，也就是常说的layout和contain是共存的，如果是vue的话很简单，很好做，但是react的路由我*****

实现方法

如上我已经对路由数据进行了构建，下面我只需要一个方法生成他

function generateRoute(value){
    if(value.children){
        return (
                <React.Fragment key={param.path} >
	                <Route path={param.path} >
	                    <param.component>
	                    {
	                        value.children.map((item)=>{
	                            return generateRoute(item)
	                        })
	                    }
	                    </param.component>
	                </Route>
            	</React.Fragment>
            )
        }
    return <Route key={value.path} path={value.path} component={value.component} />
}
function app(){
    return (
        <Switch>
            {
                router.map(item=>{
                    return generateRoute(item)
                })
            }
        </Switch>
    )
}

在一系列的转化下他会生成这个东西

<Switch>
      <Route path='/record' component={record}></Route>
      <>
           <Route path='/'>
                <Home>
                    {
                        <Route path='/feedBack' component={feedBack} />
                        <Route path='/children' component={Children} />
                    }
                </Home>
           </Route>
      </>
</Switch>
//在这里我们看到了<Home>组件，这样在Home组件中我们可以通过this.props.children来获取传入的组件，类似于vue的插槽

在Home的组件中的用法

import React, { useEffect } from "react";
import { useHistory  } from "react-router-dom";
const Tool = (props) => {
    const history = useHistory()
    useEffect(()=>{
        //这里相当于redirect的作用,可以根据自己的需求去更改。
        if(history.location.pathname == '/'){
            console.log(history.push('/todolist'));

        }
    },[])
    
    return(
        <div>
            <h1>tool</h1>
            <div>
                {
                    props.children
                }
            </div>
            <footer>haha</footer>
        </div>
    )
}

export default Tool

我所遇到的坑

卡了我一个小时的东西只有一个/

//熟悉vue路由的小伙伴都知道，子路由的path是不会加/的
const router = [
    {
        path:'/record',
        component:record
    },
    {
        path:'/',
        component:home,
        redirect:'/feedBack',
        children:[
            {
                path:'/feedBack',//就是这里vue的话会写成feedBack，但是react会/
                component:feedBack
            }
        ]
    },
]
//就这样一个小时  我很开心