09 react路由器
这个npm包为React提供了自定义版本的Router、Route和Link组件。这些组件被设计为轻量级、灵活且易于使用，允许您在React应用程序中有效地处理客户端路由。
安装
你可以使用npm或yarn来安装这个包：
npm i 09-react-router
# or
yarn i 09-react-router
使用
要使用React Router组件，请遵循以下步骤：
- 导入组件：
import { Router, Route, Link } from '09-react-router'
- 在应用程序中设置路由：
export function App() {
return (
<Router>
<Route
path="/"
Component={() => {
return (
<>
<h1>Home</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</>
);
}}
/>
<Route
path="/about"
Component={() => {
return (
<>
<h1>About</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</>
);
}}
/>
<Route
path="/contact"
Component={() => {
return (
<>
<h1>Contact</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</>
);
}}
/>
</Router>
)
}
- 定义路由组件：
export const Home = () => <h2>Home</h2>
export const About = () => <h2>About</h2>
export const Contact = () => <h2>Contact</h2>
组件
路由器
Router组件是最顶层的组件，它保存路由配置，并根据当前URL呈现适当的Route组件。
道具:
routes:（可选）包含可选路由的数组，而不是Route组件。例子:
const routes = [
{
path: '/',
Component: () => <h1>Home</h1>
},
{
path: '/about',
Component: () => <h1>About</h1>
}
]
defaultComponent:（可选）当Router中存在路由或子路由时，默认渲染的组件。
路线
Route组件用于定义路由，并在URL与指定的路径匹配时呈现相应的组件。
道具:
path (string)：路由的URL路径。 component (function)：当URL与路径匹配时要呈现的React组件。
链接
Link组件用于创建在不同路由之间导航的链路。
道具:
to (string)：单击链接时导航到的URL路径。
贡献
欢迎投稿！如果您发现任何问题或有改进建议，请随时打开新问题或提交拉取请求。
这只是一个npm包，用于重新创建自己的路由器，仅用于教学目的。