প্রতিক্রিয়া-রাউটার-ডোমের লিঙ্কটি বাহ্যিক লাইব্রেরিতে পাস করা

Question

আমি আমার বাহ্যিক (নোড_মডিউলস) প্যাটার্ন লাইব্রেরি থেকে উপাদানগুলি রেন্ডার করছি। আমার প্রধান অ্যাপ্লিকেশনটিতে, আমি আমার 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মনে হচ্ছে এটি সঠিকভাবে রেন্ডার হয়েছে, এবং ক্লিক করার পরে URL- এও নেভিগেট করে।

---

আমার সমস্যাটি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>উপাদানটি আর্গুমেন্ট বা প্রপস হিসাবে আপনার বাহ্যিক কাজকে কেন দেওয়া হচ্ছে না ? এটি আরও নমনীয়তা এবং নেভিগেশন পরিচালনা করার তার পরিষ্কার উপায়টিকে মঞ্জুরি দেয়।

— মামুন অটম্যান

আপনি কীভাবে আপনার রাউটার সেট আপ করতে পারেন? এটি কি ব্রাউজার, মেমরি বা স্ট্যাটিক রাউটার?

— শূন্য 2988

@ শূন্য ২৯৮ - আপডেট হওয়া প্রশ্ন

— danjones_mcr

@ মামুনোথম্যান - এটি বর্তমানে এটি করা হচ্ছে, তবে এটি কোনও পোস্ট-ব্যাক নেভিগেট করার পথে প্রভাব ফেলবে বলে মনে হচ্ছে।

— danjones_mcr

আপনি অননুমোদিত গ্রন্থাগার ব্যবহার করছেন react-router-redux( github.com/reactjs/react-router-redux ,) যদি না আপনি এর সেকেলে সংস্করণগুলি ব্যবহার জোরদার করা একটি বিশেষ বাধ্যতা আছে react-reduxএবং react-routerলাইব্রেরি, আপনি, নতুন সংস্করণে থেকে সরানোর বিবেচনা করা উচিত যেমন আপনার সমস্যাটির সমাধান হতে পারে )। হয় আপনি আপগ্রেড, বা আপনি সঠিক সংস্করণ প্রদান করা উচিত react, react-router-redux, react-reduxএবং react-router-domতাই আমরা একটি প্যাচিং সমাধান খুঁজে বের করার একটি সুযোগ আছে আপনার প্রকল্পের বর্তমানে ব্যবহার করা হয়।

— GonArrivi

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