Melewati tautan react-router-dom ke perpustakaan eksternal

Saya merender komponen dari pustaka pola eksternal (node_modules) saya. Di App utama saya, saya mengirimkan Linkinstance react-router-domsaya ke komponen pustaka eksternal seperti:

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

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

<Heading withLinkProps={articleWithLinkProps} />

Di perpustakaan saya, ini menerjemahkannya Linkseperti ini:

const RouterLink = withLinkProps.routerLink;

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

The RouterLinktampaknya membuat benar, dan bahkan menavigasi ke URL saat diklik.

Masalah saya adalah RouterLinktampaknya telah terlepas dari react-router-dominstance App saya . Ketika saya mengklik Heading, itu "sulit" menavigasi, memposting-kembali halaman daripada routing yang mulus seperti Linkbiasa.

Saya tidak yakin apa yang harus dicoba pada saat ini untuk memungkinkannya bernavigasi dengan mulus. Bantuan atau saran apa pun akan dihargai, terima kasih sebelumnya.

Sunting: Menampilkan bagaimana Router saya sudah diatur.

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();

Saya telah merekonstruksi use case Anda codesandbox.iodan "transisi" berfungsi dengan baik. Jadi mungkin memeriksa implementasi saya mungkin dapat membantu Anda. Namun, saya mengganti impor pustaka dengan impor file, jadi saya tidak tahu apakah itu faktor penentu mengapa itu tidak berfungsi tanpa seluruh halaman dimuat ulang.

Ngomong-ngomong, apa maksudmu dengan "mulus"? Apakah ada elemen yang tetap di setiap halaman dan tidak boleh dimuat ulang lagi saat mengklik tautan? Ini seperti saya menerapkannya di kotak pasir di mana gambar statis tetap di bagian atas pada setiap halaman.

Lihat kotak pasir .

Ini example.jsfile

// 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>
);

Dan ini my-external-library.jsfile:

import React from "react";

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