create-react-app 基于ts项目，使用react-router-dom搭建项目
<h3 id="准备工作">准备工作</h3><ul>
<li>来个react项目 create-react-app 基于TS的项目</li>
<li>ts项目安装后 删除node_modules，重新 <code>yarn install</code>， 不然jsx会报错</li>
<li>安装React-router-dom</li>
</ul>
<pre><code class="language-javascript">yarn add react-router-dom
npm install --save react-router-dom
</code></pre>
<pre><code class="language-javascript">npm i --save-dev @types/react-router-dom
</code></pre>
<h3 id="react-router-dom--react-router-功能对比">React-router-dom + React-router 功能对比</h3>
<blockquote>
<p>React-router</p>
</blockquote>
<p>实现了路由的核心功能</p>
<blockquote>
<p>React-router-dom</p>
</blockquote>
<p>基于React-router，加入了一些在浏览器运行下的一些功能，</p>
<ul>
<li>Link组件会渲染一个a标签，</li>
<li>BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步，</li>
<li>HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步</li>
</ul>
<h2 id="开始搭建">开始搭建</h2>
<h3 id="创建routers文件夹">创建routers文件夹</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218154021215-1269442679.png" alt="" loading="lazy"></p>
<h3 id="创建pages文件夹放所有的页面">创建pages文件夹（放所有的页面）</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218154216710-1331702437.png" alt="" loading="lazy"></p>
<h3 id="写的第一个页面">写的第一个页面</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218161353737-155315852.png" alt="" loading="lazy"></p>
<h3 id="导出所有页面">导出所有页面</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218161308784-1358822490.png" alt="" loading="lazy"></p>
<pre><code class="language-javascript">// 路由懒加载
import { lazy } from 'react'
const Home = lazy(() => import('./home'))
export {
Home
}
</code></pre>
<h3 id="配置路由">配置路由</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218161432205-1905251217.png" alt="" loading="lazy"></p>
<pre><code class="language-javascript">
import {
Home,
} from '../pages'
export type RouterType = {
path: string,
component: React.LazyExoticComponent<any>,
root: string[],
notExect?: boolean,
}
const HomeRouter: RouterType = {
path: '/home',
component: Home,
root: [],
}
// 总路由
const Routers: RouterType[] = ([
HomeRouter,
])
export {
Routers
}
</code></pre>
<h3 id="配置indextsx">配置index.tsx</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218162901489-825543719.png" alt="" loading="lazy"></p>
<pre><code class="language-javascript">import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
{/* 使用了路由懒加载，所以需要使用<Suspense>包起来 */}
<Suspense fallback={<div></div>}>
<Switch>
<Route path="/" render={routerProps => {
return <App {...routerProps}/>
}}/>
</Switch>
</Suspense>
</BrowserRouter>,
document.getElementById('root')
)
</code></pre>
<h3 id="配置apptsx">配置App.tsx</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218164317579-951416778.png" alt="" loading="lazy"></p>
<pre><code class="language-javascript">import React from 'react'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import { Home } from './pages'
import { Routers } from './routers'
function App () {
return (
<Switch>
{
Routers.map(router => (
<Route
exact={!router.notExect}
key={router.path}
path={router.path}
component={router.component}
>
</Route>
))
}
{/* 设置默认路由 推荐方法一*/}
{/* 方法一 */}
{/* <Route path="/" component={Home} exact></Route> */}
{/* 方法二 重定向*/}
<Redirect path="/" to="/home" />
</Switch>
)
}
export default withRouter(App)
</code></pre>
<h3 id="多个路由文件怎么办">多个路由文件怎么办？</h3>
<h3 id="pages的indexts增加引入">pages的index.ts增加引入</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218164844612-1844637795.png" alt="" loading="lazy"></p>
<h3 id="routers下新增basets文件">routers下新增base.ts文件</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218165007242-597050984.png" alt="" loading="lazy"></p>
<h3 id="routers下indexts增加引入">routers下index.ts增加引入</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218165058702-730731836.png" alt="" loading="lazy"></p>
<h3 id="多路由文件配置完成">多路由文件配置完成</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202012/1235934-20201218165127812-497414813.png" alt="" loading="lazy"></p>
<blockquote>
<p>结尾<br>
本人react也是在学习中，有问题可以在下方评论，我看见了会回复</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/feiyu159/p/14155276.html
頁:
[1]