Melewati tautan react-router-dom ke perpustakaan eksternal


10

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

Mengapa <Link>komponen Anda tidak diteruskan ke lib eksternal Anda sebagai argumen atau alat peraga? yang akan memungkinkan lebih banyak fleksibilitas dan cara penanganan navigasi yang bersih.
ROOT

Bisakah Anda menunjukkan cara mengatur router Anda? Apakah itu Browser, Memori, atau Router Statis?
zero298

@ zero298 - Pertanyaan terbaru
danjones_mcr

@mamounothman - Begitulah yang dilakukan saat ini, tetapi tampaknya memengaruhi cara navigasi ke pos-balik.
danjones_mcr

Anda menggunakan perpustakaan yang sudah tidak digunakan lagi react-router-redux( github.com/reactjs/react-router-redux ), kecuali jika Anda memiliki kendala khusus untuk menegakkan penggunaan versi react-reduxdan react-routerpustaka yang sudah ketinggalan zaman , Anda harus mempertimbangkan pindah ke versi yang lebih baru, karena dapat memperbaiki masalah Anda ). Entah Anda melakukan upgrade, atau Anda harus menyediakan versi yang tepat dari react, react-router-redux, react-reduxdan react-router-domproyek Anda saat ini menggunakan sehingga kita memiliki kesempatan untuk menemukan solusi patch.
GonArrivi

Jawaban:


2

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>;
};

Halo, terima kasih banyak atas jawabannya! Tampaknya hanya ketika melewati node_modules, apakah masalah terjadi.
danjones_mcr
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.