react-router基本使用

react-router网站 http://reacttraining.cn/

学习react-router中遇到的问题

1.这段代码会存在啥问题呢？

render () {
        return (
            
                

                    

                        首页
                    
                    

                        关于
                    
                    

                        主题
                    
                
                
                
                
            
        )
    }

报错如下：

A may have only one child element

意思就是说 一个Router仅仅有一个子组件。需要给Router里面加上一个div盒子。

因此我个人理解是Router只是个外壳，并不是一个容器。里面的div才是容器。

实现的效果：

代码如下：

import React,{ Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';


const Home = ()=> (
    
首页
)
const About = ()=>(
    
关于
)
const Themes = ({ match })=>(
    

        
主题列表
        

            
渲染
            
状态
            
Angular
        
        
         {
            return 
请选择一个主题
        }} />
    
)

const Theme = ({ match }) => (
    

        { `${match.params.id }` }
    
)


class BasicUse2 extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render () {
        return (
            
                

                    

                        

                            首页
                        
                        

                            关于
                        
                        

                            主题
                        
                    
                    
                    
                    
                
            
        )
    }
}

export default BasicUse2;

需要理解的地方有：

（1）match 这里match是一个match对象，这也是作者为什么{ match } 这样写的原因。

（2） `${ match.url }/rendering` 完整的路径，匹配到这个路径，才是显示相应的组件。

（3）const Home = ()=(

首页

) 这里我用的是小括号，还可以这样写的，

    const Home = （）=> { return

首页

}

也许是RR4最重要的组件了，它最基本的作用是：当页面的访问地址和Router的path相匹配时，就渲染出对应的UI界面。

自带3个render method 和3个props

render method 分别是：

props 分别是：

match

location

history

component

只有访问地址和路由匹配时，一个React Component才能被渲染。

render： func

此方法适用于内联渲染，而且不会出现重复装载的问题。

children

有时你只想知道访问地址是否匹配，然后改变下别的东西，而不仅仅是对应的页面。

path

需要匹配的路径

exact 

唯一匹配之后，展示对应的组件

strict：bool

对路径末尾斜杠的匹配。

为你的应用提供声明式，无障碍导航。

to: string

作用： 跳转到制定路径。

使用场景： 如果是单纯的跳转就用字符串形式的路径。

to: object

作用：携带参数跳到制定的路径