Truyền liên kết của bộ định tuyến-bộ định tuyến vào thư viện bên ngoài

Tôi đang kết xuất các thành phần từ thư viện mẫu bên ngoài (node_modules). Trong Ứng dụng chính của tôi, tôi chuyển Linkví dụ của mình từ react-router-domthành phần thư viện bên ngoài của mình như vậy:

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

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

<Heading withLinkProps={articleWithLinkProps} />

Trong thư viện của tôi, nó hiển thị Linknhư vậy:

const RouterLink = withLinkProps.routerLink;

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

Các RouterLinkdường như hiển thị chính xác, và thậm chí điều hướng đến URL khi nhấp vào.

Vấn đề của tôi là RouterLinkdường như đã tách ra khỏi react-router-domví dụ Ứng dụng của tôi . Khi tôi nhấp Heading, nó "điều hướng" cứng, đăng lại trang thay vì định tuyến ở đó liền mạch như Linkbình thường.

Tôi không chắc chắn những gì cần cố gắng vào thời điểm này để cho phép nó điều hướng liền mạch. Bất kỳ trợ giúp hoặc lời khuyên sẽ được đánh giá cao, cảm ơn bạn trước.

Chỉnh sửa: Hiển thị cách Bộ định tuyến của tôi được thiết lập.

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

Tôi đã xây dựng lại trường hợp sử dụng của bạn codesandbox.iovà "quá trình chuyển đổi" hoạt động tốt. Vì vậy, có thể kiểm tra thực hiện của tôi có thể giúp bạn. Tuy nhiên, tôi đã thay thế nhập thư viện bằng nhập tệp, vì vậy tôi không biết liệu đó có phải là yếu tố quyết định tại sao nó không hoạt động mà không tải lại toàn bộ trang.

Nhân tiện, ý của bạn là "liền mạch" nghĩa là gì? Có các yếu tố ở lại trên mỗi trang và không nên tải lại khi nhấp vào liên kết? Điều này giống như tôi đã triển khai nó trong hộp cát nơi một hình ảnh tĩnh ở trên cùng trên mỗi trang.

Kiểm tra hộp cát .

Đây là example.jstập tin

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

Và đây là my-external-library.jstập tin:

import React from "react";

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