react跳转url,跳转外链,新页面打开页面

作者:计算机教程

react中实现在js中内部跳转路由,有两种方法。

前言:

方法一:

  本文为个人学习react-router的总结。包括路由基础配置,跳转,权限管理,组件与路由配置的关系,代码分割。欢迎交流指导。

import PropTypes from 'prop-types';
export default class Header extends Component {
    static contextTypes = {
        router: PropTypes.object.isRequired,
    }
    constructor(props) {
        super(props);
        this.state = {
            keyword:"",
            channelList:[]
        };
        this.handleToSearch=this.handleToSearch.bind(this);
    }
    handleToSearch() {
        if(this.state.keyword){
            this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)
        }
    }
    render() {
        return (
               <div className="wrapper">
                  小星星小星星
               </div>
        );
    }
}

一、路由基础

方法二:

  1.路由配置 & 显示路由组件的view(类比angular的ui-view)

this.props.history.push('/download')

  路由配置:路由匹配的规则

跳转到外链:

render((
    <Router history={ hashHistory }>
        <Route path="/" component={ App }>
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found }></Route>
            <Route path="follow" component={ Follow }></Route>
            <Route path="my" component={ My }>
                <Route path=":myname" component={ MyName }></Route>
                <Route path="mysex" component={ MySex }></Route>
            </Route>
        </Route>
    </Router>
), document.getElementById('root'));
window.location.href = 'https://你的url'

  view:放置路由组件的地方(URL匹配了,然后对应的组件应该放到什么地方去),

 

  每一个Route都只是一个组件,子路由就是 this.props.children 里面的组件,Route通过匹配URL决定显示哪一个子路由

在页面中给一个按钮绑定绑定跳转,如果跳转到项目的路由,引入react-router的Link

class App extends PureComponent {
    render() {
        return (
            <div>
                <GlobalNav />
                { this.props.children } { /* this.props.children 是被嵌套在App的组件,相当于放子路由的View*/}
            </div>
        )
    }
}

使用<Link to="/download">下载</Link> 形式跳转,如果希望页面从新页面打开,加 

 

 target="_blank"

二、默认路由(IndexRoute )

如果跳转到一个外链,使用a标签,如果希望页面从新页面打开,除了加target,

  组件<App /> 的匹配路径是 ‘/', 有四个子路由,当前路由只是'/',那么<App />应该显示什么页面呢?

 target="_blank"

  这里给与IndexRoute组件 -- 若希望直接使用4个其中一个则使用IndexRedirect

还要加一个rel:

render((
    <Router history={ hashHistory }>
        <Route path="/" component={ App }>
            <IndexRoute component={ IndexApp } />
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found }></Route>
            <Route path="follow" component={ Follow }></Route>
            <Route path="my" component={ My }>
                <Route path=":myname" component={ MyName }></Route>
                <Route path="mysex" component={ MySex }></Route>
            </Route>
        </Route>
    </Router>
), document.getElementById('root'));
<a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a>

 

 

   如果不使用IndexRoute组件,也还有一种投机取巧的方法,直接在 App组件中,使用  {this.props.children || <IndexApp />} ,在ui展示的层面上修改this.props.children为undefined的情况。

   缺点:这种形式,没有参与到路由机制中,onEnter,onLeave 等HOOK都无法使用

三、路由跳转   

  1. IndexLink & Link (active状态之争)

   倘若有如下两个链接,正好URL是'/my/mioawwwww', 两个路由都匹配的了,那么就是两个都是active状态(相应地添加activeStyle,activeClassName的样式)

<Link to="/my" >Mypage</Link>
<Link to="/my/:myname" >myname</Link>

 

  若你只想为 <Link to="/my/:myname" >myname</Link> 这一个按钮添加active样式,就可以为 <Link to="/my" >Mypage</Link> 使用IndexLink

<IndexLink to="/my" >Mypage</IndexLink>
<Link to="/my/:myname" >myname</Link>

  IndexLink是补充Link的,只要URL完整匹配'/my'的时候才会激活active状态

  2.跳转参数 to

     2.1:通过 to=’xx/xx' 直接跳转 <Link to={`/my/${myname}/info`}>check my info</Link> 

     2.2:to=对象,带参数跳转(pathname, query, hash, state(额外数据)),注意:这些参数都被存放到this.props.location中

 <li><Link to={{pathname:"/select", hash:'#ahash', query:{foo: 'bar', boo:'boz'}, state:{data:'miao'}  }} activeClassName="GlobalNav-active">精选</Link></li>

     2.3:to=函数,注册到路由跳转事件中,每一次路由变化,都会执行该函数,并经最新的location作为参数

<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
  Hello
</Link>

    2.4:不使用Link,在函数内直接操作router

      旧版本:由于router只用的context传递路由信息,因此每一个组件都可以轻易的通过this.context.router获取路由

      新版本:router被放置在this.props中,通过this.props.router可以获取路由

      注意:push与replace的区别,一个是添加,一个是替换,历史记录中被替换的已经不存在了,所以浏览器回退不到替换前的页面。

    changeRouter = () => {
        console.log(this.props)
        // this.props.router.push('/follow');
        // this.props.router.push({
        //     pathname:'/follow',
        //     state:{name:'xxx'},
        //     query: {foo: 'bar'}
        // })

        // this.props.router.replace('/follow');
        this.props.router.replace({
            pathname: '/follow',
            query: {foo:'bar'}
        })
    }

   3.若不是Route组件,而是Route的子组件,则this.props.router === undefined

    若不使用Link,有两种方法

    3.1 contextTypes

    static contextTypes = {
        router: PropTypes.object
    }
    handleClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.context.router.push('login');
                //...

 

    3.2 引入browserHistory,hashHistory

本文由nba买球发布,转载请注明来源

关键词: