小编shi*_*bro的帖子

所以我对 React 还很陌生，尤其是 Typescript。我正在尽我最大的努力去解决这一切，让我赤裸裸地对待这一切！

1. 索引.tsx
2. Router.tsx（所有不同的路由）
3. LandingFrame.tsx（页面布局）

import React from 'react';

import LandingMain from './LandingMain'

const LandingFrame = () => {
    return (
        <LandingMain/>
    );
}

export default LandingFrame;

4. LandingMain.tsx（主要）

import React, { forwardRef } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const YES = gql`
  query yes {
    yes {
      id
      data
      data {
        data
        data
      }
    }
  }
`;

const LandingMain = ({ history }: RouteComponentProps<{}>) => …

我认为这是一个很好的问题，可以供其他人稍后参考。在我之前的修订中，我会为应用程序的每个页面或部分“硬编码”五到六个侧边栏和三到四个不同的顶部导航组件，因为我无法提出更好的解决方案来确定我当前所在的页面。

这是我找到的关于钩子的唯一资源或示例！

但根据我的应用程序的结构，我不确定如何解决这个问题。

索引.tsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/react-hooks';
import { apolloClient } from './utils/x';

import Router from './routes/Router';

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <Router />
  </ApolloProvider>,
  document.getElementById('root') as HTMLElement
);

路由器.tsx：

import React, { useEffect } from 'react';

import {
  useHistory,
  BrowserRouter,
  Route,
} from "react-router-dom";

import Landing from './landing/Landing';

import Zero from './dashboard/0';
import One from './dashboard/1';
import Two from './dashboard/2';
import Three from './dashboard/3';

const Router = () …