如何在不重新加载整个页面的情况下进行路由？

Question

我正在使用 react-route，并且在路由方面遇到了一些麻烦。

整个页面正在重新加载，导致我已经获取并存储在减速器中的所有数据每次都加载。

这是我的路线文件：

 var CustomRoute = React.createClass({
    render:function(){
        return <Router history={browserHistory}>
            <Route path="/" component={Layout}>
                <IndexRedirect to="/landing" />
                <Route path="landing" component={Landing} />
                <Route path="login" component={Login} />
                <Route path="form" component={Form} />
                <Route path="*" component={NoMatch} />
            </Route>
        </Router>
    },
});

在路由之前，我已经通过调用 main.jsx 中的操作来存储数据

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var React = require('react')
var Index = require('./components/index')
var createStore = require("redux").createStore
var applyMiddleware = require("redux").applyMiddleware
var Provider = require("react-redux").Provider
var thunkMiddleware = require("redux-thunk").default
var reducer = require("./reducers")
var injectTapEventPlugin =require('react-tap-event-plugin');
injectTapEventPlugin()
var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore);
var store=createStoreWithMiddleware(reducer);
store.dispatch(actions.load_contacts()) //////////// <<<<<< this is what i call to store data already

ReactDOM.render( <Provider store={store}><Index/></Provider> , document.getElementById('content'))

问题是如果成功登录，我必须路由到另一个页面：

 this.props.dispatch(actions.login(this.state.login,this.state.password,(err)=>{
    this.setState({err:err})
    if (!err){
        window.location = "/form"
    }
}));

window.location 可以解决问题，但它会重新加载效率非常低的所有内容。在手动路线中，我使用 <Link\> 该路线无需重新加载，但是对于自动路线，我不知道该怎么做。

任何建议将不胜感激。

原文由 Sijan Shrestha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于最新版本（ v2.0.0-rc5 ），推荐的导航方法是直接推送到历史单例。

演示

相关代码

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

如果使用较新的 react-router API，则在组件内部时，您需要使用来自 this.props history --- ：

 static propTypes = {
    history: React.PropTypes.object
}

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

如果使用 react-router-redux ，它提供了一个 push 函数，您可以像这样调度：

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

在 v2.4.0 及更高版本中，使用更高阶的组件来获取路由器作为组件的道具。

 import { withRouter } from 'react-router'

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

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes

Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

访问此链接了解更多信息：http: //kechengpuzi.com/q/s31079081

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

React >= 16.8 和 react-router v4

没有人提到使用挂钩的应用程序的解决方案。由于 React 16.8（和 react-router 4，不确定什么是最小版本，我使用最新的），您可以使用一个名为 useHistory 的钩子。

 import { useHistory } from 'react-router';

const MyHookComponent: React.FC = () => {

    const routerHistory = useHistory();
    routerHistory.push('/page-where-to-redirect');

    return <></>;
}

export default MyHookComponent;

更多信息在这里 https://reactrouter.com/web/api/Hooks/ 。

更新：react-router v6

在 react-router 6 中引入了一个新的钩子：

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

const navigate = useNavigate();

navigate('/page-where-to-redirect');

可以在此处找到文档 https://reactrouterdotcom.fly.dev/docs/en/v6/api#usenavigate

原文由 Vočko 发布，翻译遵循 CC BY-SA 4.0 许可协议