外部(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();
react-router-redux
(github.com/reactjs/react-router-redux)を使用していますが、古いバージョンのreact-redux
とreact-router
ライブラリの使用を強制する特別な制約がない限り、問題を解決できる可能性があるため、新しいバージョンに移行することを検討してください。 )。どちらのアップグレードを行うか、の正確なバージョンが提供しなければならないreact
、react-router-redux
、react-redux
とreact-router-dom
私たちはパッチ適用ソリューションを見つけるためのチャンスがあるので、あなたのプロジェクトが現在使用しているが。
<Link>
コンポーネントを引数または小道具として外部ライブラリに渡さないのはなぜですか?これにより、柔軟性が向上し、ナビゲーションをクリーンに処理できるようになります。