我正在从我的外部(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
似乎已与我的App 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();
您能说明如何设置路由器吗?是浏览器,内存还是静态路由器?
—
zero298,
@ zero298-更新的问题
—
danjones_mcr
@mamounothman-这是当前的工作方式,但似乎会影响它导航到回发的方式。
—
danjones_mcr
您正在使用不建议使用的库
—
GonArrivi
react-router-redux
(github.com/reactjs/react-router-redux),除非您有特殊的约束要强制使用react-redux
和react-router
库的过时版本,否则应考虑迁移到新版本,因为它可能会解决您的问题)。要么你做了升级,还是应该提供的确切版本react
,react-router-redux
,react-redux
和react-router-dom
你的项目目前正在使用,所以我们有机会找到一个补丁解决方案。
<Link>
组件作为参数或道具传递给外部lib?这样可以提供更大的灵活性,以及其处理导航的简洁方法。