结合React-Router
可以直接在NornJ模板中使用React-Router提供的组件:
import {
BrowserRouter,
HashRouter,
Link,
MemoryRouter,
NavLink,
Prompt,
Redirect,
Route,
Router,
StaticRouter,
Switch
} from 'react-router-dom';
nj`
<${Switch}>
<${Route} exact path='/' component=${Page1}/>
<${Route} exact path='/Page1' component=${Page1} />
<${Route} exact path='/Page2' component=${Page2} />
<${Route} exact path='/FormExample' component=${FormExample} />
<${Redirect} from='*' to='/'/>
</${Switch}>
`()
使用nornj-react包中的react-router组件
在nornj-react包中提供一些默认封装的组件,可更方便地使用React-Router。
这样引入即可:
import 'nornj-react/router';
组件列表:
| nornj-react中的组件名称 | 对应的React-Router组件 |
|---|---|
| BrowserRouter | BrowserRouter |
| HashRouter | HashRouter |
| router-Link | Link |
| MemoryRouter | MemoryRouter |
| router-NavLink | NavLink |
| router-Prompt | Prompt |
| Redirect | Redirect |
| Route | Route |
| Router | Router |
| StaticRouter | StaticRouter |
| router-Switch | Switch |
使用方法如下,和React-Router原生组件完全相同:
nj`
<router-Switch>
<Route exact path='/' component=${Page1}/>
<Route exact path='/Page1' component=${Page1} />
<Route exact path='/Page2' component=${Page2} />
<Route exact path='/FormExample' component=${FormExample} />
<Redirect from='*' to='/'/>
</router-Switch>
`()