nocobase/docs/zh-CN/api/client/router.md

# Router

## API

### 初始化

```tsx | pure

const app = new Application({
  router: {
    type: 'browser' // type 的默认值就是 `browser`
  }
})

// or
const app = new Application({
  router: {
    type: 'memory',
    initialEntries: ['/']
  }
})
```

### 添加路由

#### 基础用法

```tsx | pure
import { RouteObject } from 'react-router-dom'
const app = new Application()

const Hello = () => {
  return <div>Hello</div>
}

// 第一个参数是名称, 第二个参数是 `RouteObject`
app.router.add('root', {
  path: '/',
  element: <Hello />
})

app.router.add('root', {
  path: '/',
  Component: Hello
})
```

#### 支持 Component 是字符串

```tsx | pure
// register Hello
app.addComponents({
  Hello
})

// Component is `Hello` string
app.router.add('root', {
  path: '/',
  Component: 'Hello'
})
```

#### 嵌套路由

```tsx | pure
import { Outlet } from 'react-router-dom'

const Layout = () => {
  return <div>
    <Link to='/home'>Home</Link>
    <Link to='/about'>about</Link>

    <Outlet />
  </div>
}

const Home = () => {
  return <div>Home</div>
}

const About = () => {
  return <div>About</div>
}

app.router.add('root', {
  element: <Layout />
})
app.router.add('root.home', {
  path: '/home',
  element: <Home />
})
app.router.add('root.about', {
  path: '/about',
  element: <About />
})
```

它将会被渲染为如下形式:

```tsx | pure
{
  element: <Layout />,
  children: [
    {
      path: '/home',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />
    }
  ]
}
```

### 删除路由

```tsx | pure
// 传递 name 即可删除
app.router.remove('root.home')
app.router.remove('hello')
```

#### 插件中修改路由

```tsx | pure
class MyPlugin extends Plugin {
  async load() {
    // add route
    this.app.router.add('hello', {
      path: '/hello',
      element: <div>hello</div>,
    })

    // remove route
    this.app.router.remove('world');
  }
}
```

## 示例

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { Application } from '@nocobase/client';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const Layout = () => {
  return <div>
    <div><Link to={'/'}>Home</Link>, <Link to={'/about'}>About</Link></div>
    <Outlet />
  </div>
}

const app = new Application({
  router: {
    type: 'memory',
    initialEntries: ['/']
  }
})

app.router.add('root', {
  element: <Layout />
})

app.router.add('root.home', {
  path: '/',
  element: <Home />
})

app.router.add('root.about', {
  path: '/about',
  element: <About />
})

export default app.getRootComponent();
```