Estou renderizando componentes da minha biblioteca de padrões externa (node_modules). No meu aplicativo principal, estou passando minha Link
instância react-router-dom
para o componente das minhas bibliotecas externas da seguinte forma:
import { Link } from 'react-router-dom';
import { Heading } from 'my-external-library';
const articleWithLinkProps = {
url: `/article/${article.slug}`,
routerLink: Link,
};
<Heading withLinkProps={articleWithLinkProps} />
Na minha biblioteca, está renderizando o seguinte Link
:
const RouterLink = withLinkProps.routerLink;
<RouterLink
to={withLinkProps.url}
>
{props.children}
</RouterLink>
O RouterLink
parece processar corretamente, e até mesmo navega para a URL quando clicado.
Meu problema é que o RouterLink
arquivo parece ter se desconectado da react-router-dom
instância do meu aplicativo . Quando clico Heading
, ele "navega" de maneira rígida, postando de volta a página em vez de direcioná-la sem problemas, como Link
normalmente faria.
Não tenho certeza do que tentar neste momento para permitir que ele navegue sem problemas. Qualquer ajuda ou conselho será apreciado, desde já, obrigado.
Edit: Mostrando como meu roteador está configurado.
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 ), a menos que tenha uma restrição especial para impor o uso de versões desatualizadas das bibliotecas react-redux
e react-router
, considere a possibilidade de mudar para versões mais recentes, pois isso pode solucionar o seu problema ) Ou você faz o upgrade, ou você deve fornecer as versões exatas de react
, react-router-redux
, react-redux
ereact-router-dom
seu projeto está usando isso temos a chance de encontrar uma solução de correção.
<Link>
componente passado para sua biblioteca externa como argumento ou adereços? isso permitiria mais flexibilidade e sua maneira limpa de lidar com a navegação.