美文网首页
react 知识点2

react 知识点2

作者: 栗子daisy | 来源:发表于2019-08-06 15:25 被阅读0次

    create-react-app react-0701
    yarn add react-router-dom --save
    yarn add redux react-redux

    router

    react-router-dom 实现全局路由登陆拦截
    https://www.cnblogs.com/kdcg/p/9309600.html

    <Route exact path="/" component={Home} />
    <Route exact path="/about" component={About} />
    <Route exact path="/music" component={Music} />
    
    // routerMap.js用来存储所有的路由信息,定义需要登陆拦截的页面(auth)
    export default [
        {path:'/',name:Home,component:Home},
        {path:'/about',name:About,component:About},
        {path:'/music',name:Music,component:Music}
    ]
    
     <Switch>
        {Routers.map((item, index) => {
        return (
            <Route
            key={index}
            path={item.path}
            exact
            // render={props => <item.component {...props} />}
            render={props =>
                !item.auth ? (
                    <item.component {...props} />
                ) : token ? (
                    <item.component {...props} />
                ) : (
                    <Redirect
                    to={{
                        pathname: "/login",
                        state: { from: props.location }
                    }}
                    />
                )
                }
            />
        );
        })}
    </Switch>
    

    相关文章

      网友评论

          本文标题:react 知识点2

          本文链接:https://www.haomeiwen.com/subject/bgfwdctx.html