06/react路由

其他 2019-10-11 12:20:44 阅读次数: 0

01-Context-

<div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //context作用避免每一层手动传props 
    class App extends React.Component{
      render() {
        return(
          <div><div>
        )
      }
    }
    
    ReactDOM.render(<App />,document.getElementById('root'))
    
    </script>

02-react-router-

 <!--
    v4的react Router插件，react-router-dom

    单页内视图切换：
      视图容器/路径配置
  -->
    <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">

    // const Route = ReactRouterDOM.Route
    // const Router=ReactRouterDOM.BrowserRouter

    const {Route,HashRouter:Router} = ReactRouterDOM

    class App extends React.Component{

      render(){
        return(
          <Router>
          <div>
            <p>
              <a href="#/home">首页</a>  
              <a href="#/about">关于</a>  
            </p>  
            {/*上面是导航，下面就是容器了，react里完全是组件化的，不用像vue那样是配，而是把所有可能渲染的内容都放在下面
              用Route组件列举所有的路由记录，一条路由记录就是一个组件，用替换组件占位，不能用自己的组件去占位，而要用它给我们的Route组件去占位
              这个Route不是React的，是react-router-dom的，可能不是全局的，肯定是定义在某个对象上的，就像Component是定义在React上--》React.Component
              console.log(ReactRouterDOM) //ReactRouterDOM就是react-router-dom所定义的全局对象
              一般情况下我们这样去取值  const Route = ReactRouterDOM.Route
            */}
            {/*
              Route怎么知道我们要渲染的是HOME组件呢？Route上有一些属性，例如pat,componet就是要渲染的组件是什么
              当你路径切换到home的时候，Route组件就会被Home组件替换掉
              只有Route还不够，React会不会去根据Route去匹配？在vue里面匹配默认是hash匹配  但在react中没有默认匹配  要自己指定  告诉是什么模式匹配否则跑不起来，报错：Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>
              而且Route要用根元素包裹一下才有效果
            */}
            {/*Router也要赋值，全局上是没有的  也在ReactRouterDOM里  Router在ReactRouterDOM里是抽象类，创造不出实例的 对V4来说是不能直接用的，v4要选择具体的类，具体的有4个Router对象
            MemoryRouter ：用内存的方式存路径，不怎么用。一般和React native一起用
            StaticRouter:静态路径，整个路径都不变  一般也不用
            BrowserRouter:利用浏览器历史管理来实现。vue中吧mode改成history也就是这种
            HashRouter:用hash值来做历史管理。vue中的hash
            const Router=ReactRouterDOM.BrowserRouter

            Router组件内必须有根元素  V2,V3里的根元素必须是Route,v4里可以随便什么<div>就可以
            Router可以放最外层保证了几个点  1.要在Route外面 2.要有根元素
            点击关于  首页组件就会被销毁掉
            用BrowserRouter无法匹配  主要是因为a标签  改用Link
            */}
            
              <Route path="/home" component={Home}></Route>
              <Route path="/about" component={About}></Route>
            
          </div>
          </Router>
        )
      }
    }

    function Home(props){
      return(<h1>首页</h1>)
    }

    function About(props){
      return(<h1>关于。。。</h1>)
    }
    
    ReactDOM.render(<App />,document.getElementById('root'))
    
    
    </script>

03react-router

 <!--
    v4的react Router插件，react-router-dom

    单页内视图切换：
      视图容器/路径配置
  -->
    <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">

    // const Route = ReactRouterDOM.Route
    // const Router=ReactRouterDOM.BrowserRouter
    //用LINK 不管HASH还是Browser模式都能用   同时也是要导入

    const {Route,HashRouter:Router,Link} = ReactRouterDOM

    class App extends React.Component{

      render(){
        return(
          <Router>
          <div>
            <p>
              <Link to="/home">首页</Link>  
              <Link to="/about">关于</Link>  
            </p>  
              <Route path="/home" component={Home}></Route>
              <Route path="/about" component={About}></Route>
            
          </div>
          </Router>
        )
      }
    }

    function Home(props){
      return(<h1>首页</h1>)
    }

    function About(props){
      return(<h1>关于。。。</h1>)
    }
    
    ReactDOM.render(<App />,document.getElementById('root'))
    
    
    </script>

03react-router2

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
    /*
      ReactRouterDOM中的组件说明：
      1）Router:是所有路由组件共用的底层接口，相当于容器，导航不一定放里面，但Route一定放里面，用于根据location（window.location)的值更新容器
        注意：Router里面的内容必须要有根元素，根元素类型不限  v2和v3根元素必须是Route
        Router组件有：
        BrowserRouter:用HTML5的历史管理来保持组件和url的同步
        HashRouter:用URL的hash值来保持组件和url同步
        MemooryRouter：在内存中保存url历史记录，一般在测试环境下
        StaticRouter：地址从不改变
    2）Route:作用是当windoe.location的url和所设置的path属性匹配时渲染所指定的组件。第一个属性就是path（可以是字符串也可以是对象）,第二个就是指定要渲染的组件（可以写component或render函数或children
            一般情况下不做特殊处理都用component
    3)Link:a标签的增强版本，可以用来实现页面跳转  无法修改样式
    
    */
    const {Route,HashRouter:Router,Link} = ReactRouterDOM
    class App extends React.Component{
      render(){
        return(
          <Router>
            <div>
              <p>
                <Link to="/home">首页</Link>  
                <Link to="/about">关于</Link>  
              </p>  
              {/*用Router组件列举所有的路由记录
                Route组件必须有Router父组件
              */}
              <Route path="/home" component={Home}></Route>
              {/* <Route path="/home" render={()=><h2>主页</h2>}></Route> */}
              <Route path="/about" component={About}></Route>
            </div>  
          </Router>
        )
      }
    }
    
    function Home(props) {
      //每一个Route挂载的组件  props上都有3个对象
      //history  可以回退，跳转
      //location 当前的地址对象  当前的地址信息
      console.log(props)
      
        return(<h2>首页。。。<button onClick={()=>{props.history.push('/about')}}>跳转</button></h2>)
      
    }

    function About(props) {
     
        return(<h2>关于</h2>)
      
    }


    ReactDOM.render(<App/>,document.getElementById('root'))
    </script>

04-路由重定向

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
 
    const {Route,HashRouter:Router,Link,Switch} = ReactRouterDOM
    class App extends React.Component{
      
      //Route默认匹配的原理：url上有个path  Route上也有个path  这两个要对比看是否匹配成功，实际上并不是看她两是否完全相等。以/为一组来匹配，从头往后匹配，只要头部组匹配能成功就渲染
      //Switch:若果有多个匹配的路由组件，Switch让其内只渲染第一个匹配成功的路由，但是会一直匹配成第一个
      //exact:精确匹配   但有这个有无法一开始就显示首页   这时候要重定向
      //Redirect:实现重定向，from="/home"  to="/"  当Route上的都不匹配时就走到Redirect或这指定路径走到哪里就跳到另一个路径
      render(){
        return(
          <Router>
            <div>
              <p>
                <Link to="/">首页</Link>
                <Link to="/ab">包含</Link>   
                <Link to="/ab/out">关于</Link>  
                 
              </p>  
              <Switch>
                {/*
                  exact 属性表示进行完全匹配
                  strict 属性 如果为true  就认为'/about'和'/about/'是不一样的
                
                */}
                <Route path="/" exact component={Home}></Route>
                <Route path="/ab" component={Ab}></Route>
                <Route path="/ab/out" component={About}></Route>
                {/*重定向*/}
                <Redirect to="/"></Redirect>
              </Switch>
            </div>  
          </Router>
        )
      }
    }
    
    function Home(props) {

      console.log(props)
      
        return(<h2>首页。。。<button onClick={()=>{props.history.push('/about')}}>跳转</button></h2>)
      
    }

    function About(props) {
     
        return(<h2>关于</h2>)
      
    }
    function Ab(props) {
     
     return(<h2>包含</h2>)
   
 }


    ReactDOM.render(<App/>,document.getElementById('root'))
    </script>

05-路由嵌套

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    
 
    const {Route,HashRouter:Router,Link,Switch,Redirect} = ReactRouterDOM
    class App extends React.Component{
      
 
      render(){
        return(
          <Router>
            <div>
              <p>
                <Link to="/home">首页</Link>
                <Link to="/about">关于</Link>   

              </p>  
              <Switch>
                <Route path="/home" exact component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Redirect to="/home" component={Home}></Redirect>
              </Switch>
            </div>  
          </Router>
        )
      }
    }
    
    class Home extends React.Component{
      render(){
        return(
          <Router>
            <div>
              <p>
                <Link to="/home/cloth">衣服</Link>  
                <Link to="/home/food">食品</Link>  
                
                
              </p>  
              <Switch>
                <Route path="/home/cloth" render={(props)=>(<h3>衣服</h3>)}></Route>  
                <Route path="/home/food" render={(props)=>(<h3>食物</h3>)}></Route>  
              </Switch>
              
              
            </div>  
            
          </Router>
        )
      }
    }

    function About(props) {
     
        return(<h2>关于</h2>)
      
    }



    ReactDOM.render(<App/>,document.getElementById('root'))
    </script>

06-NavLink

 <style>
  .active{
    color:red
  }
  .about_active{
    color: green
  }
  
  </style>
</head>
<body>
    <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //NavLink : 在Link的功能基础上，如果当前当行被触发，多了个class=active  Link和NavLink渲染出来的都是a标签
    //修改类名等
    //NavLink所具有的属性有：
    // 1）activeClassName:设置触发时所添加的类名，默认值为active
   //  2)activeStyle:当前导航触发时所添加的行间样式    一般有className就不用style   都是激活时加的样式
   //  3）exact:值为true，则只有当前NavLink指定的路径和url中完全匹配时才会给对应的NavLink加 
    const {Route,HashRouter:Router,Link,NavLink,Switch,Redirect} = ReactRouterDOM
    class App extends React.Component{
      
 
      render(){
        return(
          <Router>
            <div>
              <p>
                <NavLink to="/home">首页</NavLink>
                <NavLink to="/about" activeClassName="about_active">关于</NavLink>   

              </p>  
              <Switch>
                <Route path="/home" exact component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Redirect to="/home" component={Home}></Redirect>
              </Switch>
            </div>  
          </Router>
        )
      }
    }
    
    class Home extends React.Component{
      render(){
        return(
          <Router>
            <div>
              <p>
                <Link to="/home/cloth">衣服</Link>  
                <Link to="/home/food">食品</Link>  
                
                
              </p>  
              <Switch>
                <Route path="/home/cloth" render={(props)=>(<h3>衣服</h3>)}></Route>  
                <Route path="/home/food" render={(props)=>(<h3>食物</h3>)}></Route>  
              </Switch>
              
              
            </div>  
            
          </Router>
        )
      }
    }

    function About(props) {
     
        return(<h2>关于</h2>)
      
    }



    ReactDOM.render(<App/>,document.getElementById('root'))
    </script>

07-动态路由

  <style>
  .active{
    color:red
  }
  .about_active{
    color: green
  }
  
  </style>
</head>
<body>
    <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-router-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
   
    //不同的url共用相同的结构模板的时候，用到动态路由  相当于一个组件匹配多个路径,样式结构一样  就是数据不一样
    const {Route,HashRouter:Router,Link,NavLink,Switch,Redirect} = ReactRouterDOM
    class App extends React.Component{
      render(){
        return(
          <Router>
            <div>
              <p>
                <NavLink to="/">首页</NavLink>
                <NavLink to="/about" activeClassName="about_active">关于</NavLink>   
                <NavLink to="/product" activeClassName="about_active">产品</NavLink>   

              </p>  
              <Switch>
                <Route path="/" exact render={(props)=>(<h1>首页----{props.match.url}</h1>)}></Route>
                <Route path="/:myPath" component={MyComponent}></Route>
              </Switch>
            </div>  
          </Router>
        )
      }
    }
    
    class MyComponent extends React.Component{
      componentWillMount(){
        console.log(this.props)
        //请求数据
        fetch('./data/${}.json')
      }
      render(){
        return(
         
            <div>
             <h2>aaaa</h2>
             <p>bbb</p>
  
              
              
            </div>  
            
          
        )
      }
    }

    



    ReactDOM.render(<App/>,document.getElementById('root'))
    </script>

猜你喜欢

转载自www.cnblogs.com/lucy-xyy/p/11653369.html
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022