react-router-domのリンクを外部ライブラリに渡す


10

外部(node_modules)パターンライブラリからコンポーネントをレンダリングしています。私のメインアプリでは、次のLinkようにインスタンスをreact-router-dom外部ライブラリのコンポーネントに渡します。

import { Link } from 'react-router-dom';
import { Heading } from 'my-external-library';

const articleWithLinkProps = {
    url: `/article/${article.slug}`,
    routerLink: Link,
  };

<Heading withLinkProps={articleWithLinkProps} />

私のライブラリでは、それを次のようにレンダリングしLinkています:

const RouterLink = withLinkProps.routerLink;

<RouterLink
  to={withLinkProps.url}
>
  {props.children}
</RouterLink>

RouterLinkクリックされたときにURLに移動しても正しくレンダリングされているようだ、と。


私の問題は、がRouterLink私のAppのreact-router-domインスタンスから切り離されているように見えることです。をクリックするとHeading、「ハード」にナビゲートし、Link通常のようにシームレスにルーティングするのではなく、ページをポストバックします。

この時点でシームレスにナビゲートできるようにするために何を試したらよいかわかりません。何か助けや助言をいただければ幸いです。よろしくお願いします。

編集:ルーターの設定方法を示しています。

import React from 'react';
import { hydrate, unmountComponentAtNode } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { ConnectedRouter } from 'react-router-redux';
import RedBox from 'redbox-react';
import { Route } from 'react-router-dom';
import { Frontload } from 'react-frontload';
import App from './containers/App';

import configureStore from './redux/store';
import withTracker from './withTracker';

// Get initial state from server-side rendering
const initialState = window.__INITIAL_STATE__;
const history = createBrowserHistory();
const store = configureStore(history, initialState);
const mountNode = document.getElementById('react-view');
const noServerRender = window.__noServerRender__;

if (process.env.NODE_ENV !== 'production') {
  console.log(`[react-frontload] server rendering configured ${noServerRender ? 'off' : 'on'}`);
}

const renderApp = () =>
  hydrate(
    <AppContainer errorReporter={({ error }) => <RedBox error={error} />}>
      <Provider store={store}>
        <Frontload noServerRender={window.__noServerRender__}>
          <ConnectedRouter onUpdate={() => window.scrollTo(0, 0)} history={history}>
            <Route
              component={withTracker(() => (
                <App noServerRender={noServerRender} />
              ))}
            />
          </ConnectedRouter>
        </Frontload>
      </Provider>
    </AppContainer>,
    mountNode,
  );

// Enable hot reload by react-hot-loader
if (module.hot) {
  const reRenderApp = () => {
    try {
      renderApp();
    } catch (error) {
      hydrate(<RedBox error={error} />, mountNode);
    }
  };

  module.hot.accept('./containers/App', () => {
    setImmediate(() => {
      // Preventing the hot reloading error from react-router
      unmountComponentAtNode(mountNode);
      reRenderApp();
    });
  });
}

renderApp();

<Link>コンポーネントを引数または小道具として外部ライブラリに渡さないのはなぜですか?これにより、柔軟性が向上し、ナビゲーションをクリーンに処理できるようになります。
Ma'moun othman

ルーターの設定方法を教えてください。それはブラウザ、メモリ、または静的ルーターですか?
zero298

@ zero298-更新された質問
danjones_mcr

@mamounothman-これは現在行われている方法ですが、ポストバックへの移動方法に影響を与えるようです。
danjones_mcr

非推奨のライブラリreact-router-reduxgithub.com/reactjs/react-router-redux)を使用していますが、古いバージョンのreact-reduxreact-routerライブラリの使用を強制する特別な制約がない限り、問題を解決できる可能性があるため、新しいバージョンに移行することを検討してください。 )。どちらのアップグレードを行うか、の正確なバージョンが提供しなければならないreactreact-router-reduxreact-reduxreact-router-dom私たちはパッチ適用ソリューションを見つけるためのチャンスがあるので、あなたのプロジェクトが現在使用しているが。
GonArrivi

回答:


2

私はあなたのユースケースを再構築しましたcodesandbox.io、そして「移行」はうまくいきます。ですから、おそらく私の実装をチェックすると役立つかもしれません。ただし、ライブラリインポートをファイルインポートに置き換えたため、ページ全体をリロードしないと機能しないのは、それが決定的な要因かどうかはわかりません。

ちなみに「シームレス」とはどういう意味ですか?すべてのページに残り、リンクをクリックしたときに再度読み込まれるべきではない要素はありますか?これは、静的な画像がすべてのページの上部にとどまるサンドボックスに実装したようなものです。


サンドボックスをチェックしてください。

これはexample.jsファイルです

// This sandbox is realted to this post https://stackoverflow.com/q/59630138/965548

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Heading } from "./my-external-library.js";

export default function App() {
  return (
    <div>
      <img
        alt="flower from shutterstock"
        src="https://image.shutterstock.com/image-photo/pink-flowers-blossom-on-blue-600w-1439541782.jpg"
      />
      <Router>
        <Route exact={true} path="/" render={Welcome} />
        <Route path="/article/coolArticle" component={CoolArticleComponent} />
      </Router>
    </div>
  );
}

const Welcome = () => {
  const articleWithLinkProps = {
    url: `/article/coolArticle`,
    routerLink: Link
  };

  return (
    <div>
      <h1>This is a super fancy homepage ;)</h1>
      <Heading withLinkProps={articleWithLinkProps} />
    </div>
  );
};

const CoolArticleComponent = () => (
  <div>
    <p>This is a handcrafted article component.</p>
    <Link to="/">Back</Link>
  </div>
);

そして、これはmy-external-library.jsファイルです:

import React from "react";

export const Heading = ({ withLinkProps }) => {
  const RouterLink = withLinkProps.routerLink;
  return <RouterLink to={withLinkProps.url}>Superlink</RouterLink>;
};

こんにちは。回答ありがとうございます。node_modulesを介して渡した場合にのみ問題が発生するようです。
danjones_mcr
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.