相关疑难解决方法(0)

随着react-router我可以使用Link元素创建的原生处理反应路由器链接.

我看到内部调用this.context.transitionTo(...).

我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做？什么是this.context？

我看到了Navigationmixin,但是我可以不用mixin吗？

我在我的React应用程序中使用react-router v4和material-ui.我想知道如果GridTile在GridList中点击一下,如何更改URL .

我最初的想法是使用处理程序onTouchTap.但是,我可以看到重定向的唯一方法是使用组件Redirect或Link.如何在不渲染这两个组件的情况下更改URL？

我试过this.context.router.push('/foo')但它似乎没有用.

我正在使用react router 4.0版本.我想在按钮点击时从一个组件导航到另一个组件.我为此实现了反应路由.实现当我点击导航按钮后它给我的错误"遗漏的类型错误:this.context.router.push不是一个函数",并警告"失败上下文类型:无效的上下文router类型的object供给EmpLogin,预计function." 尝试了很多,但无法使它工作.下面是我的组件和路由实现.早些时候我正在使用react router 2.0和browserhistory.push工作.

export class EmpLogin extends React.Component {
  constructor(props) {
super(props);
this.state = {

};
}

loginID(e) {
this.setState({loginID: e.target.value});
}

 Password(e) {
this.setState({password: e.target.value});
}

 navigate(e){
    e.preventDefault();
    this.context.router.push('/EmpDetails');
  }

render() {
  return (
    <div>
    <div >
      <form>
        <input type="text" onChange={this.loginID.bind(this)} />
        <input type="password" onChange={this.Password.bind(this)} />  
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      </form>
    </div>
  </div>
);
 }
 }

  EmpLogin.contextTypes = {
  router: React.PropTypes.func.isRequired
 }

 export default EmpLogin;

路由实施 - …

我有一个 React 组件，它整体上是可点击的，但内部也包含按钮。

所以像

<Link to={'/path1'}>
  ...
  <Link to={'path2'} />
  ...
</Link> 

这是我想要的行为，但我收到此警告：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.

我应该如何认真对待这个问题，解决方法是什么？

我在 React 组件中有以下函数，该函数在单击链接时运行：

onClick(e, { name }) {
    e.stopPropagation();

    const doIt = await checkSomething();

    if (doIt) {
        e.preventDefault();
        doSomethingElse();
    }
}

问题是，到了时间，e.preventDefault()合成事件就被回收了。那么，当需要一些逻辑来计算此决定时以及在回收合成事件之前，如何告诉浏览器在点击链接时不要点击该链接？

我正在使用下一个（5.0.0）版本react-router-redux，它与react-router 4.x兼容。

我的应用程序有两个页面/login和/home.

/login如果用户访问不存在的页面，我正在尝试将页面重定向到。这是我的代码

import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route path="/login" render={() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )}/>

        <Route path="/home" component={Home} />

        <Redirect to="/login" />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

如果我删除<Redirect to="/login" />并且用户已经登录，当他打开页面时/home，应用程序将直接转到主页，这很好。

但是，使用 时<Redirect to="/login" />，当用户打开页面时/home，应用程序将首先重定向到/login，然后返回到/home。

如何避免这种两次重定向？谢谢

目前，我创建了一个搜索栏，并将我的搜索栏链接到我的搜索结果，如下所示：

render() {
if (this.props.itemsFetchSuccess) {
  return (
    <Redirect to={{
      pathname: '/search',
      search: `?item-name=${this.props.searchQuery}`
    }} />
  );

作为我的搜索栏渲染组件的一部分。

GOOGLE CHROME 主 -> 主登陆 -> 搜索结果。

但我怀疑因为我在 React-Router v4 中使用了重定向标签，所以它没有将它添加到浏览器历史堆栈中。如果我从搜索结果页面按回浏览器，它不会返回之前的页面（即主登陆），但会返回主登陆之前的页面。

有没有更好的方法来做到这一点，因为我也尝试使用 Link 标签，但这不起作用，因为它只是生成链接，并且在搜索结果完成后实际上并不重定向。

谢谢！

注意:我对React和Meteor相当新,所以在回答我的问题时请非常具体.

我正在尝试使用meteor创建一个短信应用程序并做出反应,但是,我使用的教程是使用React v3,我想知道如何在v4中执行相同的操作,即使用browserHistory.push()或browserHistory.replace ()将用户发送到另一个页面.到目前为止,我正在做一个页面,他们可以将自己的名字设置为他们想要的任何内容,然后将它们链接到聊天页面.我知道有很多关于这方面的文章和文档,但它们都是非常复杂的例子.如果可以,你能告诉我最基本的方法,我可以将某人重定向到另一个页面.

SetName.js:

import React from "react";
import { BrowserRouter } from 'react-router-dom'

export default class SetName extends React.Component{
    validateName(e){
        e.preventDefault();
        let name = this.refs.name.value;
        if(name){
            console.log(name);
        }
        this.props.history.push('/asd')
    }
    render(){
        return(
            <div>
                <form onSubmit={this.validateName.bind(this)}>
                    <h1>Enter a  Name</h1>
                    <input ref="name" type="text"/>
                    <button>Go to Chat</button>
                </form>
            </div>
        )
    }
}

main.js

import React from "react";
import ReactDOM from "react-dom";
import {Meteor} from "meteor/meteor";
import {Tracker} from "meteor/tracker";
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import {Texts} from "./../imports/api/Text"; …

因此，我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但是，我陷入了问题，该反应路由器-DOM <Redirect/>方法并不想火的时候，我们把它里面setTimeout()的setInterval()。

因此，如果我们将其从计时器中解开，<Redirect/>它将正常工作。

问题是什么，有什么建议吗？

我的代码：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(
            this.setState({
                navigate: true
            }),
        )
        .catch(err => {
            console.error(err);
        });

        if (this.state.navigate) {
            setTimeout(() => {
                return <Redirect to="/employers" />
            }, 2000);
        }
    };

    render() {
        if (this.state.navigate) {
            setTimeout(() => …