涉及到子类的传入，就是抽组件，就是造轮子

原来的代码

<HashRouter>
	<Wrapper>
		<Main>
			<Routes>
				<Route>
					<Route path="/" element={<Money/>}/> {/*默认页面*/}
					<Route path="/tags" element={<Tags/>}/>
					<Route path="/money" element={<Money/>}/>
					<Route path="/statistics" element={<Statistics/>}/>
					{/*错误页面*/}
					<Route
						path="*"
						element={
							<main style={{ padding: "1rem" }}>
								<h1>404!</h1>
							</main>
						}
					/>
				</Route>
			</Routes>
		</Main>
		<Nav/>
	</Wrapper>
</HashRouter>

这个代码有个问题，就是错误页面下面也有标签导航Nav，因此只有把导航放在每一个实际的页面下，如

function Tags() {
    return (
        <Wrapper>
            <Main>
                <h2>标签页面</h2>
            </Main>
            <Nav/>
        </Wrapper>
    );
}

但是，标签页、统计页、记账页都差不多，因此要封装一个通用组件！ 可以封装出来

const Layout = () => {
    return (
        <Wrapper>
            <Main>
                ???
            </Main>
            <Nav/>
        </Wrapper>
    );
}

问题是，怎么传入一部分布局到这个封装的组件里去？

通过props.children

const Layout = (props: any) => {
    return (
        <Wrapper>
            <Main>
                {props.children}
            </Main>
            <Nav/>
        </Wrapper>
    );
}

其中，props.children是外部传入的子类，
使用这个封装的Layout类，并传一个子类到Layout中去

function Money() {
    return (
        <Layout><h2>记账页面</h2></Layout>
    );
}

最后把三个页面组件抽到三个独立文件中去，并放在views目录

其他

• 实现同样功能的代码，可能水平天差地别