web-dev-qa-db-ja.com

リアクションルーター3.xから4.xへの移行

https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.jsの使用からhttps://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.jsの使用に移行するにはどうすればよいですか？

以下の3.xを使用した例。

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
            <Redirect from='foo' to='/' />
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

動作をご覧ください： https://jsfiddle.net/developit/nvpr63eg/

CDNでホストされている4.xバージョンのいずれかに移動すると、動作しません（returnステートメントの後の到達不能コード）。

javascriptreactjsreact-routerreact-router-v4
18
rich

いくつかの点を変更することで、reduxで構成できました。

まず、browserHistoryはreact-routerで定義されなくなりました。戻す方法の1つは、パッケージhistoryを使用することです。

インストールする必要があります（オプションのredux）：

npm i -S history react-router react-router-redux

browserHistoryをインポートしようとする代わりに：

import { createBrowserHistory } from 'history';

Reduxを使用する場合は、これをインポートして、組み合わせたレデューサーに追加します。

import { routerReducer as routing } from 'react-router-redux';

combineReducers({
  home, about,
  routing, // new
});

次に、historyオブジェクトを作成します

// redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);

// regular
const history = createBrowserHistory();

次に、新しいhistoryオブジェクトを使用するようにルーターを変更します

<Router history={ history } children={ Routes } />

他のすべては同じでなければなりません。

誰かがThe prop history is marked as required in Router, but its value is undefined.に遭遇した場合

browserHistoryがreact-routerで使用できなくなったためです。代わりに履歴パッケージを使用する投稿を参照してください。

関連する

13
BrunoLM

これは、上記のPaul Sに対する補足的な回答です。クレジットはまだそれを投稿するためにポールに行く必要があります。

答えを補足する理由mはbcozです：-

  1. BrowserHistoryとLinkでエラーが発生しました。
  2. React-router-domを含める必要がありました。
  3. タイプミスでした（ポールの元の答え）

糸のステップ：

yarn add react-router
yarn add react-router-dom

package.json：

 "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';


//let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props =>
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

enter image description here

7
Plankton

完全なリリースに近いアップグレードガイドがあるはずです。現在のアルファではなく、今後のベータ用にコードを適合させました。ベータ版はまだリリースされていないため、残念ながらReact Routerをホストするバージョンはありません。これを使用してこれをテストできます。

let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);
5
Paul S

確かにできますが、現在のようにコードが実行されないため、コンポーネントとアプリケーションロジックの一部を書き換える必要があります。

公式ドキュメント here を読んでください。これらの変更についても良いFAQがあります here 。抜粋は次のとおりです。

なぜ大きな変化があるのですか？

tl; dr宣言的な構成可能性。

Reactルーターについてこれほど興奮したことはありません。皆さんのように、最初に取り上げてからReactについて多くのことを学びました。私たちは、途中で知っている限り最高のルーターを構築しました。私たちが最も学んだことは、宣言的構成可能性のためにReactが大好きだということです。

公式ソースによると、アップグレードする場合は、近日中にアップグレードガイドが提供されます。

アプリケーションの書き換えではなく、反復的な移行を非常に強く信じています。移行ガイドに取り組んでいますが、基本的な戦略は、両方のバージョンを並行して実行できるようにすることです（npmの制限により、両方をインストールできるように以前のバージョンを個別に公開します）。

ルートを1つずつ取得して、新しいAPIに移行できます。また、上記の構成アドオンが役立つ場合があります。

それを念頭に置いて、元の問題に戻ります。Appコンポーネントを適切に実行するには、次のようになります。

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>
    {props.children}
  </div>

  <Match exactly pattern="/" component={Home} />
  <Match pattern="/map" component={Map} />
  <Match pattern="/settings" component={Settings} />
  <Match pattern="/topics" component={Topics} />

お役に立てれば。がんばろう。

編集：どうやら@PaulSには、React-Router v4の将来のバージョンの例があります。投稿が正確な場合、上記のコードは今後機能しません。使用可能な現在のバージョンでのみ機能します。 RRv4が公開されたときの情報については、上記のリンクページに注目してください。

0
Chris

Jsfiddleに関して、v4の最近のリリースで注意すべき点がいくつかあります。最初のことは、ライブラリ全体が分離されていることです：Web、ネイティブ、およびコア（どこでも使用）。 Web専用のreact-router-domを使用します。

2：ルートをネストする方法はまったく異なります。実際にはできない親コンポーネントにルートをネストする代わりに、親コンポーネント（この場合はBrowserRouter）を定義するだけで、コンポーネント全体でルートを自由に定義できます。コンポーネントが階層を定義します。たとえば、メインコンポーネントとアプリコンポーネントを次のように整理できます。

const Main = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

const App = props => (
  <div>
    <Navigation>
      <Link to='/'>Home</Link>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    <Route exact path='/' component={Home}/>
    <Route path='/map' component={Map}/>
    <Route path='/settings' component={Settings}/>
    <Route path='/foo' render={() => (
        <Redirect to="/"/>
    )}/>
  </div>
)

お役に立てれば。以下のjsfiddleの修正をご覧になり、質問がある場合はお知らせください。

https://jsfiddle.net/bagofcole/kL6m8pjk/12/

詳細については、チェックアウトしてください： https://reacttraining.com/react-router/web/guides/quick-start

0
colemerrick