Reat-router-dom'un Bağlantısını harici kütüphaneye aktarma

Harici (node_modules) desen kütüphanemden bileşenler oluşturuyorum. Benim ana App, benim geçiyorum Linkgelen örneği react-router-domşöyle Harici kütüphanelerin bileşenine:

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

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

<Heading withLinkProps={articleWithLinkProps} />

Kütüphanemde şu şekilde işler Link:

const RouterLink = withLinkProps.routerLink;

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

RouterLinkTıklandığında URL'ye ayrılsa bile doğru bir şekilde oluşturulması görünüyor ve.

Benim sorunum , RouterLinkUygulamamın react-router-domörneğinden kopmuş gibi görünüyor . Ben tıkladığınızda Heading, bu "sert" gezinirken gönderme-geri sayfasını ziyade sorunsuz olarak orada yönlendirme daha Linknormalde.

Sorunsuz bir şekilde gezinmesine izin vermek için bu noktada ne yapacağımı bilmiyorum. Herhangi bir yardım veya tavsiye takdir edilecektir, şimdiden teşekkür ederim.

Düzenle: Yönlendiricimin nasıl kurulduğunu gösteren.

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

Kullanım durumunuzu yeniden yapılandırdım codesandbox.iove "geçiş" iyi çalışıyor. Belki benim uygulamamı kontrol etmek size yardımcı olabilir. Ancak, kütüphane içe aktarma yerine bir dosya alma ile değiştirdim, bu yüzden neden bir sayfa yeniden yükleme olmadan çalışma neden belirleyici faktör olup olmadığını bilmiyorum.

Bu arada, "kesintisiz" olarak tam olarak ne demek istiyorsun? Her sayfada kalan ve bağlantıya tıklandığında yeniden yüklenmemesi gereken öğeler var mı? Bu, her sayfada en üstte statik bir resmin kaldığı sanal alana uyguladığım gibi.

Korumalı alanı kontrol edin .

Bu example.jsdosya

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

Ve bu my-external-library.jsdosya:

import React from "react";

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