docs: add align center
This commit is contained in:
syy11cn
parent
9aad443330
commit
d4cd576586
30
README.CN.MD
30
README.CN.MD
|
|
@ -1,4 +1,4 @@
|
|||
<center>
|
||||
<div align=center>
|
||||
<h1>🎉 Config Router 🎉</h1>
|
||||
|
||||
 [](./README.MD)
|
||||
|
|
@ -7,34 +7,34 @@
|
|||
|
||||
<p style="color: gray;">一个基于 React Router v5.x 的路由配置、渲染和路由守卫库。</p>
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## `Config Router` 是什么? :thinking:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
**Config Router** :wave: 是一个配合 _React Router v5.x_ 使用的路由管理工具。 在 _React Router_ 的基础上，提供 **路由集中配置、路由渲染以及路由守卫** 功能。
|
||||
|
||||
如果你曾使用过 _Vue Router_，你将很容易就能上手使用 _Config Router_。当然，本项目不如 _Vue Router_ 那样成熟。:joy:
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## 功能 :tada:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
- :heavy_check_mark: 通过声明类似 Vue Router 中 `routes` 数组的方式 **配置路由**。
|
||||
- :heavy_check_mark: 通过 `import` 一个 `RouterView` 组件的方式 **渲染路由** :eyes:。
|
||||
- :heavy_check_mark: 渲染页面前，支持自定义 **路由守卫**。
|
||||
- :o: 敬请期待……
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## 使用方法 :book:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
你可以将这个包用于 `react-jsx` 或 `react-tsx` 项目中。在下面的使用方法中，将以 `vite` + `react` + `typescript` 搭建的项目为例。
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ interface AppProps {}
|
|||
|
||||
const App: FunctionComponent<AppProps> = () => {
|
||||
return (
|
||||
<div className="App">
|
||||
<div align=center className="App">
|
||||
<Header></Header>
|
||||
<Content>
|
||||
<RouterView
|
||||
|
|
@ -211,7 +211,7 @@ interface IndexProps {
|
|||
const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
|
||||
console.log('Index View');
|
||||
return (
|
||||
<div>
|
||||
<div align=center>
|
||||
<h1>This is Index</h1>
|
||||
<RouterView
|
||||
routes={routes}
|
||||
|
|
@ -254,7 +254,7 @@ interface IndexProps {
|
|||
const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
|
||||
console.log('Index View');
|
||||
return (
|
||||
<div>
|
||||
<div align=center>
|
||||
<h1>This is Index</h1>
|
||||
<RouterView
|
||||
routes={routes}
|
||||
|
|
@ -275,21 +275,21 @@ export default Index;
|
|||
|
||||
在这种情况下，当用户想要访问 `/home/test` 时，对应的路由和组件将被渲染。而当用户想要访问 `/home` 或其他以 `/home` 开头的域名时，其将被重定向到 `404` 页面。
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## 贡献 :computer:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
欢迎贡献！你可以 fork 这个仓库，然后提 PR。
|
||||
|
||||
在使用中有任何问题，也可以 [点击这里发布一个 issue](https://github.com/syy11cn/config-router/issues)，我收到消息后会尽快尽力处理。
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## 关于 :raised_hands:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
### 开源协议
|
||||
|
||||
|
|
|
|||
30
README.md
30
README.md
|
|
@ -1,4 +1,4 @@
|
|||
<center>
|
||||
<div align=center>
|
||||
|
||||
# 🎉 Config Router 🎉
|
||||
|
||||
|
|
@ -8,34 +8,34 @@
|
|||
|
||||
<p style="color: gray;">A route configuring, rendering and guarding lib based on React Router v5.x.</p>
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## Why Config Router? :thinking:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
**Config Router** :wave: is an attachment lib to _React Router v5.x_. It works well with React Router, helping with **route configuration, route rendering and route guarding**.
|
||||
|
||||
If you are a _Vue Router_ user before, it is quite easy for you to get started. Of course this project is not as mature as _Vue Router_. :joy:
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## Features :tada:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
- :heavy_check_mark: **Config route** by declaring the routes array like that in Vue Router.
|
||||
- :heavy_check_mark: **Render routes** by importing and using a single component called **`RouterView`** :eyes:.
|
||||
- :heavy_check_mark: **Guard routes** that should be accessed only by authorized users.
|
||||
- :o: More is on the way...
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## Usage :book:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
You can use this package in either `react-jsx` projects or `react-tsx` projects. Take project with `vite`, `react` and `typescript` for example.
|
||||
|
||||
|
|
@ -172,7 +172,7 @@ interface AppProps {}
|
|||
|
||||
const App: FunctionComponent<AppProps> = () => {
|
||||
return (
|
||||
<div className="App">
|
||||
<div align=center className="App">
|
||||
<Header></Header>
|
||||
<Content>
|
||||
<RouterView
|
||||
|
|
@ -212,7 +212,7 @@ interface IndexProps {
|
|||
const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
|
||||
console.log('Index View');
|
||||
return (
|
||||
<div>
|
||||
<div align=center>
|
||||
<h1>This is Index</h1>
|
||||
<RouterView
|
||||
routes={routes}
|
||||
|
|
@ -255,7 +255,7 @@ interface IndexProps {
|
|||
const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
|
||||
console.log('Index View');
|
||||
return (
|
||||
<div>
|
||||
<div align=center>
|
||||
<h1>This is Index</h1>
|
||||
<RouterView
|
||||
routes={routes}
|
||||
|
|
@ -276,21 +276,21 @@ export default Index;
|
|||
|
||||
In this situation, when a user want to access `/home/test`, corresponding route and component would be rendered. When accessing `/home` or other routes begin with `/home`, the user would be redirect to a `404` page.
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## Contribution :computer:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
Contributions are welcome. Just fork this repo and send PRs.
|
||||
|
||||
Any questions while using this package, please open an [issue](https://github.com/syy11cn/config-router/issues) and I would manage to solve it as soon as I receive the message.
|
||||
|
||||
<center>
|
||||
<div align=center>
|
||||
|
||||
## About :raised_hands:
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
### License
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue