2019-09-10 10:34:17 qq_37629509 阅读数 35
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

history有很多属性。
其中push是向浏览器历史添加地址,可以通过回退按钮回到来处;
replace是替换当前的页面,这样没有历史记录
在这里插入图片描述
replace常用于用户登录页面。

2018-12-09 10:44:12 qq_41709082 阅读数 349
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

React-Route-exact属性

1.一般情况下react中Route匹配会匹配所有path中含有匹配条件(to属性值)的路由。此处匹配条件一般指的是Link标签中的to属性或Redirect标签中的to属性值。
如下情况:

<Route path='/'  component={Home} />
<Route path='/index' component={Index} />

当有个Link标签为

<Link  to='/'  />

此时因为path=’/index’中含有 匹配条件 ‘/’所以也会被渲染,所以此时会同时渲染Home和Index组件。这样就会对我们的项目造成一定的影响,此时就可以使用exact属性来解决这个问题。

2.exact 为Route中的一个属性,属性值为boolean值,当为true时,表示此路由为严格匹配,为false时为正常匹配(上述情况)。严格匹配的话,就必须path属性与条件(to属性)必须完全相同,才会渲染。
所以解决上述问题直接:

<Route  path='/'  exact    component={Home} />
<>Route  path='/index'  component={Index} />

即可。

2019-10-28 10:43:30 u011435776 阅读数 42
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

在学习自己配置路由是遇到这个问题,就是

<Route path='/goods' component={Goods} />
<Route path='/goods/:id' component={GoodDetail} />

当匹配路由为/goods/:id,会匹配Goods组件和GoodDetail组件

但是我们期望得到GoodDetail

解决方法有两种:

1. 使用switch组件包裹route,类似switch语句一样匹配,从上线下找到第一个匹配的 Route,匹配中了之后,立刻就 break

<switch>
    <Route path='/goods' component={Goods} />
    <Route path='/goods/:id' component={GoodDetail} />
</switch>

2. 使用exact属性

这时可以使用exact来实现

<Route path='/goods' exact component={Goods} />
<Route path='/goods/:id' component={GoodDetail} />

exact是Route下的一条属性,react路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。

exact的值为bool型,为true是表示严格匹配,为false时为正常匹配

2017-06-28 21:59:20 boysky0015 阅读数 887
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

首先,我们来说一下react路由是做什么的呢?
我们经常会看到类似于微信下面的tab切换吧!像这种效果在react中就可以用路由实现。
在webpack搭建的环境中,我们需要用命令安装路由
Installation | 安装

npm install react-route-dom

路由的核心代码:

<Router>
    <div>
        <div>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
        </div>
        <ul>
            <li><Link to="/">主页</Link></li>
            <li><Link to="/about">关于<Link></li>
            <li><Link to="/topics">主题列表<Link></li>
        </ul>
    </div>
</Router>

我解释一下上面的有些标签的作用:

<Link>

为您的应用提供声明式的、无障碍的导航。

import { Link } from "react-route-dom";
<Link to="/about"></Link>

to: string
需要跳转的路径(pathname)或者地址(location)

<Link to="courses" />

to: object
需要跳转到的地址

<Link to={{
    pathname: '/courses',
    search: '?sort=name',
    hash: '#the-hash',
    state: { fromDashBorder: true }
}} />

replace: bool
当设置为true时,点击链接时后将使用新地址替换掉历史记录中的旧地址。
当值为false时,点击链接时后会在原有访问历史记录基础上新增一条记录。
默认为false

<Link to="/courses" replace />
<NavLink>

是Link的一个特定版本,会在匹配上当前的URL的时候会给已经渲染的元素添加样式参数。

import { NavLink } form "react-router-dom";
<NavLink to="/about">About</NavLink>

activeClassName: string
当元素匹配到当前URL时,这个类会被赋予给这个元素。其默认值为active,这个类会被添加到className属性的后面(追加)。

<navLink to="about" activeClassName="selected">About</NavLink>

activeStyle: object
当此元素被选中时,为此元素添加样式。

<NavLink to="about" activeStyle={{ color: red }}></NavLink>

exact: bool
当值为true时,只有当地址完全匹配class和style时才会用。


全部的代码如下:
文件的主目录:

  • react-route
    • src
      • Component
        • footer.js
        • about.js
        • home.js
        • topics.js
      • js
        • index.js
      • css
        • common.css
        • reset.css
    • index.html
    • package.json
    • webpack.config.js

这是文件的目录
Component中放的是组件。


import React,{ Component } from "react";
import { render } from "react-dom";
import { 
    BrowserRouter as Router,
    Route,
    Link,
} from "react-router-dom";
import Home from "./home";
import About from "./about";
import Topics from "./topics";
export default class BasicExample extends Component{
    render(){
        return(
            <Router>
                <div className="footer">
                    <div className="list_content">
                        <Route exact path="/" component={Home} />
                        <Route path="/about" component={About} />
                        <Route path="/topics" component={Topics} />
                    </div>
                    <ul className="list">
                        <li className="ul_li center"><Link to="/">主页</Link></li>
                        <li className="ul_li center"><Link to="/about">关于</Link></li>
                        <li className="ul_li center"><Link to="/topics">主题列表</Link></li>
                    </ul>
                </div>
            </Router>
        )
    }
}

index.js

//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";

import Header from "../Components/header";
//import Content from "../Components/content";
import BasicExample from "../Components/footer";

class Main extends Component{
    render(){
        return (
            <div className="container">
                <Header />

                <BasicExample />
            </div>
        )
    }
}
render(
    <Main />,
    document.getElementById("root")
);
2019-08-19 14:17:24 qq_33807889 阅读数 10
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

cmd

npm i react-route react-router react-router-dom --save

import

import { HashRouter,Route, Switch } from 'react-router-dom';

render

let routeArr = [
            {route:'/ni',component:Container},
        ]
        return (
            <HashRouter>  
                <Switch>
                    <Route exact path='/' component={Container}/>
                    {
                        routeArr.map(v=><Route key={v.route} path={v.route} component={v.component}/>)
                    }
                    {/* <Redirect to="/ni" /> */}
                </Switch>
            </HashRouter>
        )

 

react遍历Route处理

阅读数 17

没有更多推荐了,返回首页