结合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>
`()