ページ全体を再読み込みせずに経路を設定するには？

Question

私は反応経路を使用していますが、私は経路指定にいくつか問題があります。

ページ全体がリロードされているため、私が既に取り出してレデューサーに保存したすべてのデータが毎回ロードされます。私はすでに問題は、私はテキスト入力欄が別のページへのルートに持っている

/** @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')) 

私main.jsxでアクションを呼び出すことによって、データを格納ルーティングする前に

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> 
    }, 
}); 

：ここ

は私のルートファイルですログイン：

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

window.locationのトリックを行いますが、非常に非効率なすべてをリロードします。 手動ルートでは、私は<Link\>を使用して再ロードせずにルートを使用しますが、自動化の方法はわかりません。

いずれの提案も大変ありがとうございます。

Answer 1

最新のリリース（v2.0.0-rc5）の場合、推奨されるナビゲーション方法は、履歴シングルトンに直接プッシュすることです。

DEMO

関連するコード

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

新しい反応し、ルータのAPIを使用して、あなたはそのコンポーネントの内部ときthis.propsからhistoryを利用するために必要がある場合：

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

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

react-router-reduxを使用している場合は、あなたはそのように派遣することができます機能：

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

Answer 2

後は、私は私のプロジェクトのいくつかで使用されているサンプルのルートの設定であり、それはあなたに助けになるはずです：

import App from '../App'; 
import Home from '../components/pages/Home'; 
import Login from '../components/pages/Login'; 
import Register from '../components/pages/Register'; 

function shouldBeLoggedIn(nextState, replace) { 
    // const status = getLoginStatus(); //From the State manager 
    // if(status && !status.loggedin){ 
    // replace({ 
    //  pathname: '/login', 
    //  state: { nextPathname: nextState.location.pathname } 
    // }) 
    // } 
    console.log('Should be Logged in!') 
} 

function shouldNotBeLoggedIn(nextState, replace) { 
    // const status = getLoginStatus(); 
    // if(status && status.loggedin){ 
    // replace({ 
    //  pathname: '/home', 
    //  state: { nextPathname: nextState.location.pathname } 
    // }) 
    // } 
    console.log('Should Not be Logged in!') 
} 

const rootRoute = { 
    path: '/', 
    component: App, 
    indexRoute: { 
    component: Login, 
    onEnter: shouldNotBeLoggedIn 
    }, 
    indexRedirect: { 
    to: '/' 
    }, 
    childRoutes: [ { 
     path: 'home', 
     component: Home, 
     onEnter: shouldBeLoggedIn 
    }, { 
     path: 'login', 
     component: Login, 
     onEnter: shouldNotBeLoggedIn 
    }, { 
     path: 'register', 
     component: Register, 
     onEnter: shouldNotBeLoggedIn 
    } 
    ] 
} 

export default rootRoute; 

で上記のコードでは、各ルートにはルータのライフサイクルメソッドに対するonEnterフックがあり、ルートを入力するかどうかを決定します。コメントを見ると、フックされた方法で何をすべきかを決めることができます。あなたは、次のgithubのレポでコードの上に閲覧することができ

：後https://github.com/pankajpatel/kickstart-react/blob/master/src/js/routes/routes.js

でhttp://github.com/pankajpatel/kickstart-reactとファイルがreact-router's API documentationからの例です：

const userIsInATeam = (nextState, replace, callback) => { 
    fetch(...) 
    .then(response = response.json()) 
    .then(userTeams => { 
     if (userTeams.length === 0) { 
     replace(`/users/${nextState.params.userId}/teams/new`) 
     } 
     callback(); 
    }) 
    .catch(error => { 
     // do some error handling here 
     callback(error); 
    }) 
} 

<Route path="https://stackoverflow.com/users/:userId/teams" onEnter={userIsInATeam} />