ユニバーサルルータをReactに置く場所とリンクを定義する方法は？

Question

これはかなり基本的な質問ですが、universal-routerのドキュメントではこれについて説明していません。その例は私のReactプロジェクトでは機能しないようです。

私は私のindex.jsでこれを持っている：私のAppコンポーネントで

import Router from 'universal-router'; 
import { HomeComponent, HelpComponent, AboutComponent } from './home.jsx'; 

const routes = [ 
    { path: '/', action:() => <HomeComponent /> }, 
    { path: '/home', action:() => <HomeComponent /> }, 
    { path: '/about', action:() => <AboutComponent /> }, 
    { path: '/help', action:() => <HelpComponent /> }, 
    { path: '*', action:() => <h1>Nope.</h1> } 
]; 

const router = new Router(routes); 

router.resolve({ path: '/' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

そしてこの、非常にシンプルなメニュー：

export class App extends React.Component { 
    render() { 
     return(
       <div> 
        <a href="/">Root</a> |&nbsp; 
        <a href="/home">Home</a> |&nbsp; 
        <a href="/help">Help</a> |&nbsp; 
        <a href="/about">About</a> |&nbsp; 
        <a href="/uijsklfdsse">404</a> 
       </div> 
       ); 
    } 
} 

あなたは、これは非常に簡単です見ての通り、私はちょうどしようとしていますがこれをどうやって得るかを理解する。それはほぼ正確に書かれたものですhere,まだそれは動作しません。何らかの理由で、いつもAboutComponentが呼び出され、リンクをクリックするとブラウザがページ全体をリフレッシュしているように見えるので、SPAとして動作しません。私は経路定義を間違った場所に置いているような気がしますが、どこに置くのですか？リンクを定義する方法は？

私はを使用しています。React-routerは、インストール時に廃止され、このものに置き換えられていると言われています。悪い考えだったら教えてください。

Answer 1

私はrouter.resolveを一度だけ呼び出すべきだと思います。これはあなたのアプリが常にAboutComponentで終わる理由のようです。あなたのindex.jsからこの部分を削除するようにしてください：

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

また、反応-ルータは非推奨ではありません。反応ルータを使用することをお勧めします： https://github.com/ReactTraining/react-router

Answer 2

あなたのルートは正常です。デフォルトのhref動作を処理することで、ブラウザのリフレッシュを防ぐことができます。すなわちonClick(event) { event.preventDefault(); }

ウィンドウHistory APIを使用してプッシュ状態を管理するための、あなたは私がお勧めするか、手動または他のいくつかのプラグインでそれについて行くことができるこのhistoryプラグインを使用することができます。

ルーターの柔軟性を高めるには、必要に応じていつでも呼び出すことができるように、関数を使用してルートを動的に解決することができます。

代わりの

router.resolve({ path: '/' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

あなたは

const router = new Router(routes); 

function renderRoute(location) { 
    router.resolve({ path: location.pathname }).then(component => { 
    render(component, document.getElementById('router-outlet')); 
    }); 
} 

renderRoute(window.location); 

を行うと、ウィンドウのパスが変更されるたびにrenderRouteを呼び出すことができます。

historyとすると、リスナーやその他の便利な機能を提供することで、これを簡単にすることができます。あなたがしなければならないことは、単一のインスタンスを作成し、それをあなたのアプリケーション全体で使用することだけです。

どこかシングルトンを作成します（つまり、history.js）

import createHistory from 'history/createBrowserHistory'; 
export default createHistory(); 

、両方のあなたのNAV

... 
import history from './history.js'; 

export class App extends React.Component { 
    handleClick(event) { 
    event.preventDefault(); 
    history.push({ 
     pathname: event.currentTarget.pathname 
    }); 
    } 
    render() { 
     return(
     <div> 
      <a href="/" onClick={this.handleClick}>Root</a> |&nbsp; 
      <a href="/home" onClick={this.handleClick}>Home</a> |&nbsp; 
      ... 
     </div> 
    ); 
    } 
} 

とルーティングインデックス

import history from './history.js' 
... 

renderRoute(history.location); 

history.listen(renderRoute); 

このhow-toはでもう少し行くためにそれを使用あなたがもっと知りたいならば、深さ。