बाहरी पुस्तकालय में प्रतिक्रिया-राउटर-डोम का लिंक पास करना

Question

मैं अपने बाहरी (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जब क्लिक यूआरएल पर नेविगेट सही ढंग से प्रस्तुत करने के लिए लगता है, और यहां तक कि।

---

मेरा मुद्दा यह है कि RouterLinkलगता है कि मेरे ऐप के 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();

Comments

<Link>एक तर्क या सहारा के रूप में आपके घटक को आपके बाहरी दायित्व में पारित क्यों नहीं किया गया है? यह नेविगेशन को संभालने के अधिक लचीलेपन और इसके स्वच्छ तरीके की अनुमति देगा।

— मैमून ओथमैन

क्या आप दिखा सकते हैं कि आपने अपना राउटर कैसे सेट किया? यह एक ब्राउज़र, मेमोरी, या स्टेटिक रूटर है?

— शून्य

@ जीरो 298 - अपडेटेड सवाल

— danjones_mcr

@mamounothman - यही कारण है कि वर्तमान में यह किया जा रहा है, लेकिन लगता है कि जिस तरह से यह एक पोस्ट-बैक करने के लिए नेविगेट करता है।

— danjones_mcr

आप पदावनत पुस्तकालय react-router-redux( github.com/reactjs/react-router-redux ) का उपयोग कर रहे हैं , जब तक कि आपके पास पुराने react-reduxऔर react-routerपुस्तकालयों के पुराने संस्करणों का उपयोग करने को लागू करने के लिए कोई विशेष बाधा नहीं है , आपको नए संस्करणों पर जाने पर विचार करना चाहिए, क्योंकि यह आपकी समस्या को ठीक कर सकता है। )। या तो आप उन्नयन करते हैं, या आप का सही संस्करण प्रदान करना चाहिए react, react-router-redux, react-reduxऔर react-router-domइसलिए हम एक पैचिंग समाधान खोजने के लिए एक मौका है अपनी परियोजना वर्तमान में उपयोग कर रहा है।

— गोनेरिवानी

Answer 1

मैंने आपके उपयोग के मामले को फिर से बनाया है codesandbox.ioऔर "संक्रमण" ठीक काम करता है। तो शायद मेरे कार्यान्वयन की जाँच करने से आपको मदद मिल सकती है। हालाँकि, मैंने लाइब्रेरी आयात को फ़ाइल आयात से बदल दिया है, इसलिए मुझे नहीं पता कि यह निर्णायक कारक है कि यह पूरे पृष्ठ को फिर से लोड किए बिना काम क्यों नहीं करता है।

वैसे, "सीमलेस" से आपका क्या मतलब है? क्या ऐसे तत्व हैं जो हर पृष्ठ पर बने रहते हैं और लिंक पर क्लिक करते समय फिर से लोड नहीं किए जाने चाहिए? यह ऐसा है जैसे मैंने इसे सैंडबॉक्स में लागू किया जहां हर पृष्ठ पर एक स्थिर चित्र शीर्ष पर रहता है।

---

की जाँच करें सैंडबॉक्स ।

यह example.jsफाइल है

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

और यह my-external-library.jsफाइल है:

import React from "react";

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

Comments

नमस्ते वहाँ, उत्तर के लिए बहुत धन्यवाद! ऐसा लगता है कि जब केवल नोड_मॉडल से गुजरते हैं, तो समस्या होती है।

— danjones_mcr