标签: react-router

我正在使用react-redux和标准的react-routing.我需要在明确的行动后重定向.

例如:我已经注册了几个步骤.行动结束后:

function registerStep1Success(object) {
    return {
        type: REGISTER_STEP1_SUCCESS,
        status: object.status
   };
}

我希望他使用registrationStep2重定向到页面.怎么做？

ps在历史浏览器中,'/ registrationStep2'从未出现过.此页面仅在成功结果registrationStep1页面后出现.

我在使用react路由器时遇到了一些麻烦(我正在使用版本^ 4.0.0).

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';


ReactDOM.render(
  <Router history={browserHistory} >
    <Route path="/" component={App} />

  </Router>,
  document.getElementById('root')
);

App.js就是一切.我在这里张贴基本的,因为它不是问题(我相信)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> …

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

我想做的是这样的:

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

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

我无法设法将 props 传递到新的 React-router v6 中的 Outlet 组件。我尝试了简单的解决方案：

render() {
  return (
    <Outlet name="My name" />
  );
}

这会正确渲染子组件，但是没有任何道具传递给子组件。React 团队（或其他任何人）提供的示例都没有显示带有 props 的 Outlet，所以我担心它实际上不是一个东西。是否有其他方法我没有找到或者我错误地使用了输出组件？

编辑：似乎没有直接的方法来传递道具，请参阅下面的答案。

当我关闭特定模式时，我看到以下错误：

当我使用react-router v5时，这种情况并没有发生，但由于其他要求，我最近更新到了v6，并且它开始发生。有趣的是，我有第二个页面调用相同的对话框，但它不会触发错误。

（请注意，这是一个开发环境，而不是生产环境。它可能不会出现在生产中，或者只是转到控制台。）

我似乎无法通过谷歌搜索找到任何东西......我得到的最接近的是对“ResizeObserver - 超出循环限制”的引用。我对此感到困惑，因为它没有出现在另一页上。更糟糕的是，该应用程序正在使用 Bootstrap v3（由于公司遗留原因，我现在没有足够的带宽来解决这个问题）。

有任何想法吗？

我想在我的react/react-router/flux应用程序中建立一个Facebook登录.我在登录事件中注册了一个监听器,'/dashboard'如果他们已登录,则希望将用户重定向到.我该怎么做？location.push除了完全重新加载页面后,效果不佳.

我正在使用Redux,redux-router和reactjs.

我正在尝试创建一个应用程序来获取路由更改的信息,所以,我有类似的东西:

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

当有人进入时,artist/<artistId>我想搜索艺术家,然后呈现信息.问题是,这是最好的方法吗？

我找到了一些关于它的答案,使用RxJS或尝试使用中间件来管理请求.现在,我的问题是,这真的是必要的还是仅仅是一种保持架构反应不可知的方法？我可以从react componentDidMount()和componentDidUpdate()获取我需要的信息吗？现在我通过触发请求信息的函数中的动作来执行此操作,并在信息到达时重新呈现组件.该组件有一些属性让我知道:

{
    isFetching: true,
    entity : {}
}

谢谢!

我正在尝试新的react-router 1.0.0而且我收到了一些我无法解释的奇怪警告:

警告:propType失败:提供给`Route`的无效prop`组件`.

警告:提供给`Route`的未定义的`component`无效.

该应用很简单:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';

import App from './components/app';

var Speaker = require('./components/speaker');

ReactDOM.render((
    <Router>
      <Route path="/" component={App}>
        // This is the source of the warning:
        <Route path="speaker" component={ Speaker }/>
      </Route>
    </Router>
), document.getElementById('react-container'));

speaker.jsx:

import React from 'react';

var Speaker = React.createClass({
  render() {
    return (
        <h1>Speaker</h1>
    )
  }
});

module.exoprts = Speaker;

app.jsx只有以下render()函数:

render() {
    return (
        <div>
            <Header title={this.state.title} status={this.state.status} /> …

我在带有打字稿的 react router v5.1.2 中使用 UseHistory 钩子吗？运行单元测试时，我遇到了问题。

类型错误：无法读取未定义的属性“历史”。

import { mount } from 'enzyme';
import React from 'react';
import {Action} from 'history';
import * as router from 'react-router';
import { QuestionContainer } from './QuestionsContainer';

describe('My questions container', () => {
    beforeEach(() => {
        const historyHistory= {
            replace: jest.fn(),
            length: 0,
            location: { 
                pathname: '',
                search: '',
                state: '',
                hash: ''
            },
            action: 'REPLACE' as Action,
            push: jest.fn(),
            go: jest.fn(),
            goBack: jest.fn(),
            goForward: jest.fn(),
            block: jest.fn(),
            listen: jest.fn(),
            createHref: jest.fn()
        };//fake …

我是React JS的初学者,我想为我的仪表板开发基于路由器的反应导航.该模型如下:

我为尝试路由而创建的app.js代码如下:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Login from './components/Login.js';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById('placeholder'))

如何创建模型中显示的导航？