react路由-白红宇

react路由

阅读量：4473 次

发布时间：2019-06-08

本文共 1624 字，大约阅读时间需要 5 分钟。

import React from 'react'import { Router, Route, Link } from 'react-router'const App = React.createClass({  render() {    return (      
             
      App
        
                
       
        About
          
       
        Inbox
        
      
        {
    this.props.children}      
     
    )  }})const About = React.createClass({  render() {    return About
  }})const Inbox = React.createClass({  render() {    return (      
             
      Inbox
        {
    this.props.children || "Welcome to your Inbox"}      
     
    )  }})const Message = React.createClass({  render() {    return Message {
   this.props.params.id}
  }})React.render((  
         
            
             
               
              
           
        
     ), document.body)this.props.location.query.bar和this.props.match,params.id效果一样

路由的嵌套使用

想象一下当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的 this.props.children 还是 undefined。 这种情况我们可以使用 IndexRoute 来设置一个默认页面。import { IndexRoute } from 'react-router'const Dashboard = React.createClass({  render() {    return 
     
      Welcome to the app!
     
  }})React.render((  
         
      
             {
    /* 当 url 为/时渲染 Dashboard */}      
             
             
               
               
           
        
     ), document.body)

现在，App 的 render 中的 this.props.children 将会是 
     
      这个元素。 这个功能类似 Apache 的DirectoryIndex 以及 nginx的 index指令，上述功能都是在当请求的 URL 匹配某个目录时，允许你制定一个类似index.html的入口文件。我们的 sitemap 现在看起来如下：URL    组件/    App -> Dashboard/about    App -> About/inbox    App -> Inbox/inbox/messages/:id    App -> Inbox -> Message

转载于:https://www.cnblogs.com/l8l8/p/9510420.html

你可能感兴趣的文章

angularjs 使用angular-sortable-view实现拖拽效果（包括拖动完成后的方法使用）