标签: react-router-v4

好吧,我厌倦了尝试.
该onEnter方法不起作用.知道为什么会这样吗？

// Authentication "before" filter
function requireAuth(nextState, replace){
  console.log("called"); // => Is not triggered at all 
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

// Render the app
render(
  <Provider store={store}>
      <Router history={history}>
        <App>
          <Switch>
            <Route path="/front" component={Front} />
            <Route path="/home" component={Home} onEnter={requireAuth} />
            <Route exact path="/" component={Home} onEnter={requireAuth} />
            <Route path="*" component={NoMatch} />
          </Switch>
        </App>
      </Router>
  </Provider>,
  document.getElementById("lf-app")

编辑:

我打电话时执行该方法onEnter={requireAuth()},但显然这不是目的,我也不会得到所需的参数.

我必须根据浏览历史实现一些业务逻辑.

我想做的是这样的:

reactRouter.onUrlChange(url => {
   this.history.push(url);
});

当URL更新时,有没有办法从react-router接收回调？

试着找出如何回到上一页.我在用[react-router-v4][1]

这是我在第一个目标网页中配置的代码:

<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={Page1}/>
    <Route path="/Page2" component={Page2}/>
    <Route path="/Page3" component={Page3}/>
  </div>
</Router>

为了转发到后续页面,我只是这样做:

this.props.history.push('/Page2');

但是,我怎样才能回到上一页？尝试了下面提到的一些事情,但没有运气:1.this.props.history.goBack();

给出错误:

TypeError:null不是对象(评估'this.props')

2. this.context.router.goBack();

给出错误:

TypeError:null不是对象(评估'this.context')

3. this.props.history.push('/');

给出错误:

TypeError:null不是对象(评估'this.props')

Page1在下面发布代码:

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
  }


  handleNext() {
    this.props.history.push('/page2');
  }

  handleBack() {
    this.props.history.push('/');
  }


  /*
   * Main render method of this class
   */
  render() {
    return (
      <div>
        {/* …

我正在尝试使用TypeScript的react路由器.但是,我在使用withRouter功能时遇到了一些问题.在最后一行,我得到了非常奇怪的错误:

Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'RouteComponentProps<any>'.
      Property 'match' is missing in type '{}’

代码如下:

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface HomeProps extends RouteComponentProps<any> {
}

interface HomeState { }

class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
  }
  public …

我正在学习React自己的在线教程.

所以这是使用React Router的基本示例:

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </Route>
</Router>

使用我的App组件:

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
              <li><Link to="home">Home</Link></li>
              <li><Link to="about">About</Link></li>
              <li><Link to="contact">Contact</Link></li>
           </ul>
          {this.props.children}
        </div>
     )
   }
}
export default App;

但是,我在使用IndexRoute时遇到问题,因为它没有显示任何内容,所以我在npm上搜索react-router-dom v4的模块,里面没有IndexRoute.相反,它使用这个:

<Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/contact" component={Contact}/>
  </div>
</Router>

那么如何为1条路径渲染2个组件呢？

我正在开发中,我检查,如果用户不是一个应用程序loggedIn我都显示登录表单,否则dispatch一个action将改变路线和加载其他组件.这是我的代码:

render() {
    if (isLoggedIn) {
        // dispatch an action to change the route
    }
    // return login component
    <Login />
}

我怎么能实现这一点,因为我无法改变渲染功能内的状态.

到目前为止,我已经阅读了很多关于react-router v4和npm历史库的内容,但似乎没有人帮助我.

我的代码按预期运行,直到它应该导航并在使用history.push()方法更改url时执行简单的重定向.URL正在更改为指定的路由,但不会在按钮上执行重定向.在此先感谢,仍在学习反应路由器......

我想按钮按钮在没有{forceRefresh:true}的情况下进行简单的重定向,然后重新加载整个页面.

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}

我使用以下简单的导航代码

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

URL更改但视图不更改.但是,当我刷新页面或手动转到该URL时,它会发生变化.

在react-router v3中,我们使用activeStyle和activeClassName来设置活动链接的样式

我们可以做这样的事情

  <div id="tags-container">
    {tags.map(t =>
      <Link
        className="tags"
        activeStyle={{ color: 'red' }}
        to={t.path}
      >
        {t.title}
      </Link>
    )}
  </div>

我想知道如何在v4中做同样的事情？

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

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

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