react-router基本使用

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

学习react-router中遇到的问题

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

render () { return ( <Router> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/about">关于</Link> </li> <li> <Link to="/themes">主题</Link> </li> </ul> <Route exact path="/" component = { Home } /> <Route path="/about" componnet={ About } /> <Route path="/themes" component={ Themes } /> </Router> ) }

报错如下：

A <Router> 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 = ()=> ( <div>首页</div> ) const About = ()=>( <div>关于</div> ) const Themes = ({ match })=>( <div> <h3>主题列表</h3> <ul> <li><Link to={ `${match.url}/rendering` }>渲染</Link></li> <li><Link to={ `${ match.url }/status`}>状态</Link></li> <li><Link to={ `${ match.url }/angular`}>Angular</Link></li> </ul> <Route path={ `${ match.url }/:id` } component={ Theme } /> <Route exact path={ `${ match.url }`} render={ ()=> { return <div>请选择一个主题</div> }} /> </div> ) const Theme = ({ match }) => ( <div> { `${match.params.id }` } </div> ) class BasicUse2 extends Component { constructor(props) { super(props); this.state = { } } render () { return ( <Router> <div> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/about">关于</Link> </li> <li> <Link to="/themes">主题</Link> </li> </ul> <Route exact path="/" component = { Home } /> <Route path="/about" componnet={ About } /> <Route path="/themes" component={ Themes } /> </div> </Router> ) } } export default BasicUse2;

需要理解的地方有：

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

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

（3）const Home = ()=( <div>首页</div>) 这里我用的是小括号，还可以这样写的，

    const Home = （）=> { return <div>首页</div> }

<Route>

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

<Route>自带3个render method 和3个props

render method 分别是：

<Route component >

<Route render>

<Route children>

props 分别是：

match

location

history

component

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

render： func

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

children

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

path

需要匹配的路径

exact 

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

strict：bool

对路径末尾斜杠的匹配。

<Link>

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

to: string

作用： 跳转到制定路径。

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

<Link to="/about" />

to: object

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