首頁猿問使用反應性路由器以編程方式導航

使用反應性路由器以編程方式導航

JavaScript React.JS

千巷貓影 2019-06-03 09:54:44

使用反應性路由器以編程方式導航帶著react-router我可以用Link元素創建本機由Reaction路由器處理的鏈接。我看到內部呼叫this.context.transitionTo(...).我想做一個導航，但不是從一個鏈接，從下拉選擇例如。我怎樣才能用代碼做到這一點呢？是什么this.context?我看到了Navigation混音，但我不需要混音就能做到這一點嗎？

查看完整描述

3 回答

慕森王

TA貢獻1777條經驗獲得超3個贊

Reaction-路由器4.0.0+回答

在4.0及以上版本中，使用歷史記錄作為組件的支柱。

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here};

注意：如果您的組件沒有由<Route>..你應該用<Route path="..." component={YourComponent}/>擁有這個。歷史在你的成分中。

Reaction-路由器3.0.0+回答

在3.0及以上版本中，使用路由器作為組件的支柱。

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here};

Reaction-路由器2.4.0+回答

在2.4及以上版本中，使用高階組件將路由器作為組件的支柱。

import { withRouter } from 'react-router';class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here};// Export the decorated classvar DecoratedExample = withRouter(Example);
   // PropTypesExample.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired  }).isRequired};

Reaction-路由器2.0.0+回答

此版本與1.x向后兼容，因此不需要升級指南。只看一遍這些例子就足夠了。

也就是說，如果您希望切換到新的模式，路由器內有一個瀏覽器歷史模塊，您可以使用該模塊訪問

import { browserHistory } from 'react-router'

現在您可以訪問您的瀏覽器歷史記錄，這樣您就可以進行推送、替換等操作.比如：

browserHistory.push('/some/path')

進一步讀：歷史和通航

Reaction-路由器1.x.x回答

我將不談升級細節。你可以在升級指南

這里問題的主要變化是從導航混合到歷史的變化?，F在它使用瀏覽器歷史性API來改變路由，所以我們將使用pushState()而今而后。

下面是一個使用MIXIN的例子：

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }})

注意這個History來自牢騷滿腹/歷史項目。不是反應-路由器本身。

如果出于某些原因(可能因為ES6類)而不想使用MIXIN，那么您可以訪問從路由器獲得的歷史記錄。this.props.history..它將只能訪問由您的路由器呈現的組件。因此，如果要在任何子組件中使用它，則需要通過props.

您可以在1.0.x文件

這是一個專門關于在組件外部導航的幫助頁面。

它建議獲取一個參考history = createHistory()打電話replaceState在那上面。

Reaction-路由器0.13.x回答

我也遇到了同樣的問題，只能用Reaction路由器附帶的導航混合器找到解決方案。

我就是這么做的

import React from 'react';import {Navigation} from 'react-router';let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }});

我能打電話transitionTo()不需要訪問.context

或者你可以試試漂亮的ES6class

import React from 'react';export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }}Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired};

Reaction-路由器-Redux
注：如果您正在使用Redux，則有另一個項目名為Reaction-路由器-Redux這為您提供了React路由器的Redux綁定，使用的方法與反應-剩余是嗎？

Reactive-R外層-Redux有幾個可用的方法，允許從內部操作創建者進行簡單的導航。這對于那些在Rep本機中具有現有體系結構的人來說尤其有用，他們希望在最低限度的樣板開銷的情況下利用ReactiveWeb中相同的模式。

探索以下方法：

push(location)
replace(location)
go(number)
goBack()
goForward()

下面是一個示例用法杜克:

./actioncreators.js

import { goBack } from 'react-router-redux'export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewComponent.js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}>
  CANCEL</button>

反對回復 2019-06-03

12345678_0001

TA貢獻1802條經驗獲得超5個贊

反應-路由器v2

最近的版本(v2.0.0-rc5)，推薦的導航方法是直接推到歷史單例上。您可以在在組件文檔外部導航.

有關摘錄：

import { browserHistory } from 'react-router';browserHistory.push('/some/path');

如果使用更新的反應性路由器api，則需要使用history從…this.props當組件在內部時，所以：

this.props.history.push('/some/path');

它也提供pushState但是，對于記錄在案的警告來說，這是不可取的。

如果使用react-router-redux，它提供了一個push函數，您可以這樣分派：

import { push } from 'react-router-redux';this.props.dispatch(push('/some/path'));

但是，這可能只用于更改URL，而不是實際導航到頁面。

反對回復 2019-06-03

3 回答
0 關注
717 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用反應性路由器以編程方式導航

使用反應性路由器以編程方式導航

3 回答

添加回答