Стиль NavLink не работает при импорте из файла

Question

Я стиль NavLink с styled, и по какой-то причине он работает нормально, когда компонент находится в том же файле, который я хочу использовать.Если я переместу его в отдельный текстовый файл компонента, он выдаст ошибки.

Вот рабочий код:

import * as React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import styled, { ThemeProvider, theme } from '@/theme';

const store = configureStore();

const Index = () => <h2>Home</h2>;
const Help = () => <h2>Help</h2>;

const NavigationItem = styled(NavLink)`
  color: green;

  &[aria-current] {
    color: red;
  }
`;

const App = () => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <Router>
        <>
            <Sidebar>
              <NavigationItem to="/" exact>
                Home
              </NavigationItem>
              <NavigationItem to="/Help">Help</NavigationItem>
            </Sidebar>

            <Content>
              <Route path="/" exact component={Index} />
              <Route path="/help/" component={Help} />
            </Content>
          </AppWrapper>
        </>
      </Router>
    </ThemeProvider>
  </Provider>
);

Теперь, если я переместу NavigationItem в отдельный файл:

NavigationItem.ts

import { BrowserRouter as NavLink } from 'react-router-dom';
import styled from '@/theme';

const NavigationItem = styled(NavLink)`
  color: green;

  &[aria-current] {
    color: red;
  }
`;

export default NavigationItem;

и App.tsx

import * as React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import styled, { ThemeProvider, theme } from '@/theme';

const store = configureStore();

const Index = () => <h2>Home</h2>;
const Help = () => <h2>Help</h2>;

import NavigationItem from './NavigationItem';

const App = () => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <Router>
        <>
            <Sidebar>
              <NavigationItem to="/" exact>
                Home
              </NavigationItem>
              <NavigationItem to="/help">Help</NavigationItem>
            </Sidebar>

            <Content>
              <Route path="/" exact component={Index} />
              <Route path="/help/" component={Help} />
            </Content>
          </AppWrapper>
        </>
      </Router>
    </ThemeProvider>
  </Provider>
);

Я получаю эту странную ошибку:

Type '{ children: string; to: string; exact: true; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<BrowserRouterProps & RefAttributes<BrowserRouter>, "ref" | "basename" | "getUserConfirmation" | "forceRefresh" | "keyLength" | "key"> & Partial<...>, "ref" | ... 4 more ... | "key"> & { ...; } & { ...; } & { ...; }'.
  Property 'to' does not exist on type 'IntrinsicAttributes & Pick<Pick<BrowserRouterProps & RefAttributes<BrowserRouter>, "ref" | "basename" | "getUserConfirmation" | "forceRefresh" | "keyLength" | "key"> & Partial<...>, "ref" | ... 4 more ... | "key"> & { ...; } & { ...; } & { ...; }'.

Я не понимаю, что этопричина ошибок, поскольку нет разницы между двумя подходами.

Answer 1

В NavigationItem.ts вы используете import { BrowserRouter as NavLink } from 'react-router-dom';

Но рабочий код import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';

import { BrowserRouter as NavLink } from 'react-router-dom';
import styled from '@/theme';

const NavigationItem = styled(NavLink)`
  color: green;

  &[aria-current] {
    color: red;
  }
`;

export default NavigationItem;