天道酬勤,学无止境

使用React Router V4以编程方式导航(Programmatically navigate using react router V4)

问题

我刚刚从v3到v4替换了react-router
但是我不确定如何以编程方式导航Component的成员函数。 即在handleClick()函数中,我想在处理一些数据后导航到/path/some/where 。 我曾经通过以下方式做到这一点:

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

但是我在v4中找不到这样的接口。
如何使用v4导航?

回答1

如果您以浏览器环境为目标,则需要使用react-router-dom软件包,而不是react-router 。 它们遵循与React相同的方法,以分离核心( react )和平台特定的代码( react-domreact-native ),其细微差别在于您无需安装两个单独的软件包,因此环境包包含您需要的一切。 您可以通过以下方式将其添加到您的项目中:

yarn add react-router-dom

或者

npm i react-router-dom

您需要做的第一件事是提供<BrowserRouter>作为应用程序中最顶层的父组件。 <BrowserRouter>使用HTML5 history API并为您管理它,因此您不必担心自己进行实例化并将其作为道具传递给<BrowserRouter>组件(就像在以前的版本中一样)。

在V4中,要以编程方式导航,您需要访问history对象(可通过React context ,只要您将<BrowserRouter>提供程序组件作为应用程序中最顶层的父对象即可。 该库通过上下文公开router对象,该对象本身包含history作为属性。 history界面提供了几种导航方法,例如pushreplacegoBack 。 您可以在此处检查属性和方法的整个列表。

给Redux / Mobx用户的重要说明

如果您将redux或mobx用作应用程序中的状态管理库,则可能遇到了组件问题,这些组件应该是位置感知的,但在触发URL更新后不会重新呈现

发生这种情况是因为react-router使用上下文模型将location传递给组件。

connect和observer都创建了组件,这些组件的shouldComponentUpdate方法对当前道具和下一个道具进行了浅层比较。 只有更改了至少一个道具后,这些组件才会重新渲染。 这意味着为了确保它们在位置更改时更新,需要为它们提供一个在位置更改时更改的道具。

解决此问题的2种方法是:

  • 连接的组件包装在无路径的<Route /> 。 当前location对象是<Route>传递给它呈现的组件的道具之一
  • 使用withRouter高阶组件包装您的连接组件,实际上具有相同的效果,并注入了与道具相同的location

抛开这些,有四种方法可以编程方式进行导航,并按建议进行排序:

1.-使用<Route>组件

它提倡一种声明式的风格。 在v4之前, <Route />组件放置在组件层次结构的顶部,必须事先考虑您的路由结构。 但是,现在您可以在树中的任何位置具有<Route>组件,从而使您可以更好地控制根据URL进行的有条件渲染。 Route作为道具将matchlocationhistory作为道具注入。 导航方法(例如pushreplacegoBack ...)可用作history对象的属性。

有3种方式来呈现一个什么Route ,通过使用componentrenderchildren道具,但不要超过在同一个使用Route 。 选择取决于用例,但是基本上前两个选项仅在path与url位置匹配时才呈现您的组件,而对于children ,无论路径是否与位置匹配都将呈现组件(用于基于UI的调整)关于网址匹配)。

如果要自定义组件渲染输出,则需要将组件包装在函数中并使用render选项,以便将除matchlocationhistory之外的其他所需道具传递给组件。 一个例子来说明:

import { BrowserRouter as Router } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

2.-与withRouter HoC一起使用

这个更高阶的组件将注入与Route相同的道具。 但是,它带有一个限制,即每个文件只能有1个HoC。

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }),
};

export default withRouter(ButtonToNavigate);

3.-使用Redirect组件

渲染<Redirect>将导航到新位置。 但是请记住,默认情况下,当前位置会被新位置替换,例如服务器端重定向(HTTP 3xx)。 该新位置由提供to支柱,这可以是一个字符串(URL重定向到)或location对象。 如果您想将新条目推送到历史记录中,请同时传递一个push道具并将其设置为true
<Redirect to="/your-new-location" push />

4.-通过上下文手动访问router

不鼓励使用上下文,因为上下文仍然是实验性的API,它可能会在React的未来版本中中断/更改
const ButtonToNavigate = (props, context) => (
  <button
    type="button"
    onClick={() => context.router.history.push('/my-new-location')}
  >
    Navigate to a new location
  </button>
);

ButtonToNavigate.contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  }),
};

不用说,还有其他非浏览器生态系统专用的Router组件,例如<NativeRouter> ,该组件在内存中复制导航堆栈并以React Native平台为目标,可通过react-router-native包获得。

有关更多参考,请随时查看官方文档。 该库的一位合著者还制作了一个视频,其中对React-router v4进行了非常酷的介绍,重点介绍了一些主要更改。

回答2

最简单的方法来完成它:

this.props.history.push("/new/url")

笔记:

  • 您可能希望将history prop从父组件传递到要调用该操作的组件(如果该组件不可用)。
回答3

迁移到React-Router v4时,我遇到了类似的问题,因此我将在下面尝试解释我的解决方案。

请不要认为此答案是解决问题的正确方法,我想随着React Router v4变得更加成熟并退出beta版,很有可能会出现更好的情况(它甚至可能已经存在,但我才发现它) 。

对于上下文,我遇到了这个问题,因为我偶尔使用Redux-Saga以编程方式更改历史记录对象(例如,用户成功进行身份验证时)。

在React Router文档中,查看<Router>组件,您可以看到您能够通过prop传递自己的历史对象。 这是解决方案的本质-我们将历史对象全局模块提供React-Router

脚步:

  1. 安装历史记录npm模块- yarn add historynpm install history --save
  2. 在您的App.js级别文件夹中创建一个名为history.js文件(这是我的偏好)

     // src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();`
  3. 将此历史对象添加到您的路由器组件,如下所示

    // src/App.js import history from '../your/path/to/history.js;' <Router history={history}> // Route tags here </Router>
  4. 调整URL就像通过导入您的全局历史对象之前:

     import history from '../your/path/to/history.js;' history.push('new/path/here/');

现在,所有内容都应该保持同步,并且您还可以通过编程方式而不是通过组件/容器来访问设置历史对象的方法。

回答4

TL; DR:

if (navigate) {
  return <Redirect to="/" push={true} />
}

简单且声明性的答案是,您需要结合使用<Redirect to={URL} push={boolean} />setState()

push:布尔值-设置为true时,重定向会将新条目推入历史记录,而不是替换当前条目。


import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

完整示例在这里。 在这里阅读更多。

PS。 该示例使用ES7 +属性初始化程序来初始化状态。 如果您有兴趣的话,也请看这里。

回答5

如果您正在使用功能组件,请使用useHistory挂钩

您可以使用useHistory挂钩获取history实例。

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();
  
  return (
    <button onClick={() => history.push("/about")}>
      Click me
    </button>
  );
}

useHistory挂钩使您可以访问可用于导航的历史记录实例。

在页面组件内使用history属性

React Router将一些属性(包括history注入页面组件。

class HomePage extends React.Component {
  render() {
    const { history } = this.props;

    return (
      <div>
        <button onClick={() => history.push("/projects")}>
          Projects
        </button>
      </div>
    );
  }
}

用Router包装子组件以注入路由器属性

withRouter包装器将路由器属性注入组件。 例如,您可以使用此包装器注入路由器以注销放置在用户菜单内的按钮组件。

import { withRouter } from "react-router";

const LogoutButton = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push("/login")}>
      Logout
    </button>
  );
});

export default LogoutButton;
回答6

您也可以简单地使用道具来访问历史对象: this.props.history.push('new_url')

回答7

步骤1:只有一件事要导入:

import {Route} from 'react-router-dom';

步骤2:在您的路线中,传递历史记录:

<Route
  exact
  path='/posts/add'
  render={({history}) => (
    <PostAdd history={history} />
  )}
/>

步骤3:历史记录在下一个组件中作为道具的一部分被接受,因此您可以简单地:

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

这很容易,而且功能非常强大。

回答8

这有效:

import { withRouter } from 'react-router-dom';

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;
回答9

我的回答与亚历克斯的相似。 我不确定为什么React-Router会如此不必要地变得复杂。 为什么我必须用HoC包装我的组件,才能访问本质上是全局的东西?

无论如何,如果您看看他们如何实现<BrowserRouter>,它只是历史的一个很小的包装。

我们可以拉出历史记录,以便可以从任何地方导入它。 但是,诀窍在于,如果您正在执行服务器端渲染,并且尝试import历史记录模块,则该模块将不起作用,因为它使用了仅浏览器的API。 但这没关系,因为我们通常只在响应点击或其他客户端事件时才进行重定向。 因此,可以假冒它是可以的:

// history.js
if(__SERVER__) {
    module.exports = {};
} else {
    module.exports = require('history').createBrowserHistory();
}

在webpack的帮助下,我们可以定义一些变量,以便我们知道我们所处的环境:

plugins: [
    new DefinePlugin({
        '__SERVER__': 'false',
        '__BROWSER__': 'true', // you really only need one of these, but I like to have both
    }),

现在你可以

import history from './history';

从任何地方。 它只会在服务器上返回一个空模块。

如果您不想使用这些魔术变量,则只require在需要它的全局对象中(在事件处理程序内部)进行要求。 import将不起作用,因为它仅在顶层起作用。

回答10

我认为@rgommezz涵盖了大多数情况,但我认为这很重要。

// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");

这使我可以编写带有操作/调用的简单服务,可以调用该操作/调用以从所需的任何组件进行导航,而无需在组件上进行大量的HoC操作...

尚不清楚为什么以前没有人提供此解决方案。 希望对您有所帮助,如果您发现任何问题,请告诉我。

回答11

我已经测试了v4几天了,..到目前为止,我很喜欢它! 过了一会儿才有意义。

我也有同样的问题,我发现像下面这样处理效果最好(甚至可能是预期的)。 它使用状态,三元运算符和<Redirect>

在constructor()中

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

在render()中

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

在clickhandler()中

 this.setState({ redirectTo: '/path/some/where' });

希望能帮助到你。 让我知道。

回答12

我为此苦了一段时间-这么简单,却又如此复杂,因为ReactJS只是编写Web应用程序的一种完全不同的方式,这对我们老年人来说是非常陌生的!

我创建了一个单独的组件来将混乱抽象化:

// LinkButton.js

import React from "react";
import PropTypes from "prop-types";
import {Route} from 'react-router-dom';

export default class LinkButton extends React.Component {

    render() {
        return (
            <Route render={({history}) => (
                <button {...this.props}
                       onClick={() => {
                           history.push(this.props.to)
                       }}>
                    {this.props.children}
                </button>
            )}/>
        );
    }
}

LinkButton.propTypes = {
    to: PropTypes.string.isRequired
};

然后将其添加到您的render()方法中:

<LinkButton className="btn btn-primary" to="/location">
    Button Text
</LinkButton>
回答13

由于没有其他方法可以处理这种可怕的设计,因此我编写了一个使用withRouter HOC方法的通用组件。 下面的示例包装了button元素,但是您可以更改为所需的任何clickable元素:

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const NavButton = (props) => (
  <Button onClick={() => props.history.push(props.to)}>
    {props.children}
  </Button>
);

NavButton.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }),
  to: PropTypes.string.isRequired
};

export default withRouter(NavButton);

用法:

<NavButton to="/somewhere">Click me</NavButton>
回答14
this.props.history.push("/url")

如果您没有在组件中找到this.props.history,请尝试执行此操作

import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)  
回答15

有时我更喜欢先按应用程序再按按钮来切换路由,这是一个对我有用的最小工作示例:

import { Component } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props)

    /** @type BrowserRouter */
    this.router = undefined
  }

  async handleSignFormSubmit() {
    await magic()
    this.router.history.push('/')
  }

  render() {
    return (
      <Router ref={ el => this.router = el }>
        <Link to="/signin">Sign in</Link>
        <Route path="/signin" exact={true} render={() => (
          <SignPage onFormSubmit={ this.handleSignFormSubmit } />
        )} />
      </Router>
    )
  }
}
回答16

您可以通过这种方式有条件地导航

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/path/some/where");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
回答17

对于需要在使用React RouterReact Router Dom完全初始化路由器之前进行重定向的人员,您可以通过简单地访问履历对象并将新状态推入您的app.js结构中来提供重定向。 考虑以下:

function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length > 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            <BrowserRouter>
                {this.state.hostState ? (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/" component={PublicContainer}/>
                    </div>
                ) : (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                    </div>
                )

                }
            </BrowserRouter>)
    }


}

在这里,我们想通过在组件渲染之前与历史对象进行交互来更改依赖于子域的输出Routes,我们可以有效地重定向,同时仍保持路由完好无损。

window.history.pushState('', '', './login');

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在React-Router v4中以编程方式导航(Programmatically navigating in React-Router v4)
    问题 使用React Router V4进行一些验证后,如何才能移到新页面? 我有这样的事情: export class WelcomeForm extends Component { handleSubmit = (e) => { e.preventDefault() if(this.validateForm()) // send to '/life' } render() { return ( <form className="WelcomeForm" onSubmit={this.handleSubmit}> <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/> </form> ) } } 我想将用户发送到另一条路线。 我看过重定向,但似乎它将从我不想要的历史记录中删除当前页面。 回答1 您正在使用react-router v4,因此您需要在组件中使用withRouter来访问历史对象的属性,然后使用history.push动态更改路由。 withRouter: 您可以通过withRouter高阶组件访问历史对象的属性和最接近的匹配项。 每当路线更改时
  • 使用react-router以编程方式导航(Programmatically Navigate using react-router)
    问题 我正在开发一个应用程序,在其中检查用户是否loggedIn 。 我有显示登录表单,否则dispatch的action将改变路线和加载其他组件。 这是我的代码: render() { if (isLoggedIn) { // dispatch an action to change the route } // return login component <Login /> } 由于无法更改render函数内部的状态,我该如何实现。 回答1 考虑到您正在使用react-router v4 将组件与withRouter使用,并使用props中的history.push更改路线。 仅当您的组件未收到Router道具时才需要使用withRouter ,这种情况可能在以下情况下发生:当您的组件是由Router渲染的组件的嵌套子代,并且您尚未将Router道具传递给它时。该组件根本没有链接到路由器,并且作为与路由分离的单独组件呈现。 import {withRouter} from 'react-router'; class App extends React.Component { ... componenDidMount() { // get isLoggedIn from localStorage or API call if (isLoggedIn) { // dispatch
  • 使用React路由器以编程方式导航(Programmatically navigate using React router)
    问题 通过react-router我可以使用Link元素来创建由react路由器本地处理的链接。 我在内部看到它调用this.context.transitionTo(...) 。 我想导航。 不是来自链接,而是来自下拉菜单(例如)。 如何在代码中执行此操作? 这是什么this.context ? 我看到了Navigation mixin,但是没有mixins可以做到吗? 回答1 带有钩子的React Router v5.1.0 如果您使用React> 16.8.0和功能组件,则在React Router> 5.1.0中有一个新的useHistory钩子。 import { useHistory } from "react-router-dom"; function HomeButton() { const history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); } 反应路由器v4 使用React Router v4,您可以采用三种方法在组件内进行编程路由。 使用withRouter高阶组件。 使用合成并渲染<Route> 使用context
  • Programmatically navigate using react router V4
    I have just replaced react-router from v3 to v4. But I am not sure how to programmatically navigate in the member function of a Component. i.e in handleClick() function I want to navigate to /path/some/where after processing some data. I used to do that by: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') But I can't find such interfaces in v4. How can I navigate using v4?
  • Programmatically navigating in React-Router v4
    How can I move to a new page after some validation is done with React Router V4? I have something like this: export class WelcomeForm extends Component { handleSubmit = (e) => { e.preventDefault() if(this.validateForm()) // send to '/life' } render() { return ( <form className="WelcomeForm" onSubmit={this.handleSubmit}> <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/> </form> ) } } I would like to send the user to another route. I had a look at Redirect but it seems like it would delete the current page from the history
  • 使用React-Router检测用户离开页面(Detecting user leaving page with react-router)
    问题 我希望我的ReactJS应用程序在离开特定页面时通知用户。 特别是一条弹出消息,提醒他/她进行以下操作: “更改已保存,但尚未发布。现在执行吗?” 我应该全局在react-router上触发此操作,还是可以在react页面/组件内完成此操作? 我还没有找到任何关于后者的东西,我宁愿避免第一个。 除非当然是其规范,否则这使我想知道如何执行这样的事情而不必向用户可以访问的所有其他可能的页面添加代码。 欢迎有任何见解,谢谢! 回答1 react-router v4引入了一种使用Prompt阻止导航的新方法。 只需将其添加到您要阻止的组件中即可: import { Prompt } from 'react-router' const MyComponent = () => ( <React.Fragment> <Prompt when={shouldBlockNavigation} message='You have unsaved changes, are you sure you want to leave?' /> {/* Component JSX */} </React.Fragment> ) 这将阻止所有路由,但不会阻止页面刷新或关闭。 要阻止它,您需要添加以下内容(根据需要使用相应的React生命周期进行更新): componentDidUpdate = () => {
  • 如何在React Router v4中推送到历史记录?(How to push to History in React Router v4?)
    问题 在当前版本的React Router(v3)中,我可以接受服务器响应并使用browserHistory.push转到相应的响应页面。 但是,这在v4中不可用,我不确定哪种适当的处理方式。 在此示例中,使用Redux,当用户提交表单时, components / app-product-form.js调用this.props.addProduct(props) 。 当服务器返回成功消息时,该用户将被带到“购物车”页面。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } 如何从React Router v4的功能重定向到购物车页面? 回答1 您可以在组件外部使用history方法。 通过以下方式尝试。 首先
  • react-router-将道具传递给处理程序组件(react-router - pass props to handler component)
    问题 对于使用React Router的React.js应用程序,我具有以下结构: var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 我想将一些属性传递到“ Comments组件中。 (通常,我会像<Comments myprop="value" />那样执行此操作) 用React Router做到这一点最简单,正确的方法是什么? 回答1 更新 自新版本发布以来
  • 如何在react-router v4中使用history.push / Link / Redirect传递参数?(How to pass params with history.push/Link/Redirect in react-router v4?)
    问题 我们如何在React-Router v4中使用this.props.history.push('/page')传递参数? .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); }); 回答1 首先,您不需要var r = this; 因为if statement引用了回调本身的上下文,因为您使用的是箭头功能,所以它引用了React组件的上下文。 根据文档: 历史记录对象通常具有以下属性和方法: 长度-(数字)历史记录堆栈中的条目数 action-(字符串)当前操作(PUSH,REPLACE或POP) location-(对象)当前位置。 可能具有以下属性: pathname-(字符串)URL的路径搜索-(字符串)URL查询字符串 hash-(字符串)URL哈希片段 state-(字符串)特定于位置的状态,当该位置被推入堆栈时,该状态提供给例如push(path,state)。 仅在浏览器和内存历史记录中可用。 push(path,[state])-(函数)将新条目推入历史堆栈 replace(path,[state])-(函数)替换历史记录堆栈上的当前条目 go(n)-(函数
  • 如何获取react-router v4的历史记录?(How to get history on react-router v4?)
    问题 我从React-Router v3迁移到v4时遇到一些小问题。 在v3中,我能够在任何地方执行此操作: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 如何在v4中实现这一目标。 我知道当您在Component中时,可以使用withRouter ,react上下文或事件路由器props。 但对我而言并非如此。 我正在寻找v4中的NavigatingOutsideOfComponents的等效项 回答1 您只需要有一个导出history对象的模块。 然后,您将在整个项目中导入该对象。 // history.js import { createBrowserHistory } from 'history' export default createBrowserHistory({ /* pass a configuration object here if needed */ }) 然后,您可以使用<Router>组件,而不是使用内置路由器之一。 // index.js import { Router } from 'react-router-dom' import history from './history' import App from './App'
  • Programmatically navigate using React router
    With react-router I can use the Link element to create links which are natively handled by react router. I see internally it calls this.context.transitionTo(...). I want to do a navigation. Not from a link, but from a dropdown selection (as an example). How can I do this in code? What is this.context? I saw the Navigation mixin, but can I do this without mixins?
  • 手动刷新或编写时,React-router网址不起作用(React-router urls don't work when refreshing or writing manually)
    问题 我正在使用React-router,当我单击链接按钮时,它可以正常工作,但是当我刷新网页时,它不会加载我想要的内容。 例如,我在localhost/joblist ,一切都很好,因为我按链接到达此处。 但是,如果刷新网页,则会得到: Cannot GET /joblist 默认情况下,它不是这样工作的。 最初,我的URL为localhost/#/和localhost/#/joblist ,它们工作得很好。 但我不喜欢这种URL,因此尝试删除# ,我写道: Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); localhost/不会发生此问题,这总是返回我想要的。 编辑:这个程序是单页的,所以/joblist不需要向任何服务器询问任何内容。 EDIT2:我的整个路由器。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler=
  • Programmatically Navigate using react-router
    I am developing an application in which I check if the user is not loggedIn. I have to display the login form, else dispatch an action that would change the route and load other component. Here is my code: render() { if (isLoggedIn) { // dispatch an action to change the route } // return login component <Login /> } How can I achieve this as I cannot change states inside the render function.
  • 如何在Reactjs的新的react-router-dom中使用重定向(How to use Redirect in the new react-router-dom of Reactjs)
    问题 我正在使用最新版本的react-router模块,名为react-router-dom,该模块已成为使用React开发Web应用程序时的默认模块。 我想知道在POST请求后如何进行重定向。 我一直在编写此代码,但是在请求之后,什么都没有发生。 我在网上查看过,但是所有数据都是关于React Router的先前版本的,而关于最后一个更新的则不是。 代码: import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer from '../../shared/components/Footer'; class SignUpPage extends React.Component { constructor(props) { super
  • React Router v4-如何获取当前路由?(React Router v4 - How to get current route?)
    问题 我想在<AppBar />显示以某种方式从当前路线传入的title 。 在React Router v4中, <AppBar />如何能够将当前路由传递到其title道具中? <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> 是否可以通过<Route />上的自定义prop传递自定义标题? 回答1 在5.1版本的react-router中,有一个名为useLocation的钩子,该钩子返回当前的位置对象。 每当您需要知道当前URL时,这可能都会有用。 import { useLocation } from 'react-router-dom' function HeaderView() { const location = useLocation(); console.log(location.pathname)
  • React-如何从查询字符串获取参数值?(React - How to get parameter value from query string?)
    问题 从服务器重定向后,如何在Twitter的单点登录过程生成的URL中在route.jsx文件中定义路由以捕获__firebase_request_key参数值? http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 我尝试使用以下路由配置,但:redirectParam没有捕获所提到的参数: <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router> 回答1 通用的React Router v4和React Router v5 React Router v4不再为您解析查询,但是您只能通过this.props.location.search (或useLocation,请参见下文)进行访问。 出于某些原因,请参阅nbeuchat的答案。 例如,将qs库导入为qs即可 qs.parse(this.props.location.search, { ignoreQueryPrefix: true })._
  • 使用React Router V4 / V5的嵌套路由(Nested routes with react router v4 / v5)
    问题 我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route config。 我想将我的应用分为2个不同的部分。 前端和管理区域。 我在想这样的事情: <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> 前端的布局和样式与管理区域不同。 因此,在首页中,回家的路线大约应该是子路线。 / home应该呈现在Frontpage组件中, / admin / home应该呈现在Backend组件中。 我尝试了一些变体,但始终以不打/ home或/ admin / home结尾。 编辑-19.04.2017
  • Detect change in query param react-router-dom v4.x and re-render component
    I am not really sure why its showing the default route once I did a query param change. Is there a better approach for this kind of issue? maybe I shouldn't be using query param? Open to get educated! Version "react": "^16.2.0", "react-dom": "^16.2.0", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", Test Case https://codepen.io/adamchenwei/pen/YeJBxY?editors=0011 Steps to reproduce Click on Home -> Step 1 Expected Behavior Go to Step 1 as well as Step 2 render correct dom Actual Behavior Empty, nothing renders on the page // For this demo, we are using the UMD build of react-router-dom
  • 将自定义道具传递到react-router v4中的路由器组件(Passing custom props to router component in react-router v4)
    问题 我正在使用React Router创建一个多页面应用程序。 我的主要组件是<App/> ,它呈现了到子组件的所有路由。 我正在尝试通过路线传递道具,根据我所做的一些研究,子组件最常用的方式是利用它们继承的this.props.route对象来this.props.route传递下来的道具。 但是,这个对象对我来说是未定义的。 在子组件的render()函数上,我console.log(this.props)并返回一个看起来像这样的对象 {match: Object, location: Object, history: Object, staticContext: undefined} 看起来根本不像我期望的道具。 这是我的详细代码。 父级组件(我试图在所有子级组件中将单词“ hi”作为一个称为“ test”的道具传递下来): import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom'; import Link from 'react-router'; import React from 'react'; import Home from './Home.jsx'; import Nav from './Nav.jsx'; import Progress from
  • 如何在React Router 4中实现经过身份验证的路由?(How to implement authenticated routes in React Router 4?)
    问题 我试图实现经过身份验证的路由,但是发现React Router 4现在阻止了它的工作: <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> 错误是: 警告:您不应在同一路径中使用<Route component>和<Route children> ; <Route children>将被忽略 在这种情况下,实现此目标的正确方法是什么? 它出现在react-router (v4)文档中,提示类似 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul>