ฉันกำลังสร้างการแสดงผลคอมโพเนนต์จากไลบรารีรูปแบบภายนอก (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
ดูเหมือนว่าจะทำให้ได้อย่างถูกต้องและแม้กระทั่งนำทางไปยัง 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();
react-router-redux
( github.com/reactjs/react-router-redux ) เว้นแต่คุณจะมีข้อ จำกัด พิเศษในการบังคับใช้รุ่นเก่าของreact-redux
และreact-router
ห้องสมุดที่คุณควรพิจารณาการย้ายไปยังรุ่นใหม่มันก็อาจจะแก้ไขปัญหาของคุณ ) ไม่ว่าคุณจะทำอัพเกรดหรือคุณควรให้รุ่นที่แน่นอนของreact
, react-router-redux
, react-redux
และreact-router-dom
โครงการของคุณในปัจจุบันคือการใช้เพื่อให้เรามีโอกาสที่จะหาวิธีการแก้ปัญหาที่ปะ
<Link>
องค์ประกอบของคุณส่งต่อไปยัง lib ภายนอกของคุณเป็นอาร์กิวเมนต์หรืออุปกรณ์ประกอบฉาก? ที่จะช่วยให้มีความยืดหยุ่นมากขึ้นและวิธีการจัดการการนำทางที่สะอาด