React router 如何渲染(render和children)---访问控制

1.React路由页面如何渲染

React中用 Route 组件来渲染，且一个 Route 组件只能渲染一个路由页面，渲染几个路由页面要就写几个 Route 组件
有关路由基本用法和传值等相关请参考:React router 使用及路由传参总结

1.常规渲染方式:

import React from 'react'
import Login from './pages/Login/Login'
import Layout from './pages/Layout/Layout'
import NotFound from './pages/NotFound/NotFound'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
// 根组件App
export default function App () {
  return (
        <Router>
            <div className="app">
                <Switch>
                // 每个Route对应一个页面组件
                    <Redirect from="/" to='/login' exact/>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/home' component={Layout} />
                    <Route component={NotFound}></Route>
                </Switch>
            </div>
        </Router>
  )
}
复制代码

其中 BrowserRouter 组件表示路由采用HTML5 History模式来跳转页面。

跟Vue Router中创建Router实例对象的构建选项mode的值为history一样的效果:

Vue.use(Router)
const router = new Router({
  mode: 'history'
})
export default router
复制代码

如果要采用 URL hash 值来跳转页面，可以使用 HashRouter 来包裹 Route 组件。更多HashRouter和BrowserRouter请参考:React router 使用

2.路由页面内容如何设置渲染方式

除了常规的渲染方式通过用 Route 组件上还另外两个属性，可以设置路由页面中要渲染的内容。

• render：函数，返回一个React组件。
• children：函数，返回一个React组件。
• component：值为一个React组件。(常规方式)

1.children方式

<Route
        path = '/home'
        children={() => {
          return (
            <div>children渲染路由页面</div>
          )
        }}
      />
复制代码

2.render方式

<Route
        path = '/home'
        render={() => {
          return (
            <div>render渲染路由页面</div>
          )
        }}
      />
复制代码

3.children方式和render方式作用

使用component={组件}渲染,固定写法,不能增加渲染条件,children方式和render方式接收的是函数,可以在函数内部根据条件渲染不同的内容,以render为例:

// 根据是否有Token 来决定去到哪个页面 类似vue中的beforeEach守卫
<Route
        path = '/home'
        render={() => {
          if (Token) {
            return (
              <Home/>
            )
          }else{
            return <Redirect to="/login" />
          }
        }}
      />
复制代码

3.访问控制:

1.自定义组件控制访问权限

// 自定义组件 有的页面需要token才能访问 (直接在地址栏修改URL到home页面,重定向到login)
import { Route, Redirect } from 'react-router'

export default function AuthRoute (props) {
//   console.log(props)
  const Com = props.component
  //   return <div>xxxx</div>
  return (
    <Route
      path={props.path}
      render={(props) => {
        // console.log(props, '0000000')
        if (hasToken()) {
          return <Com />
        } else {
        //   console.log('没有token....')
          return <Redirect to="/login" />
        }
      }}
    />
  )
}
复制代码

2.在路由规则文件导入并使用自定义的组件

// 导入自定义组件
import AuthRoute from '@/components/AuthRouter/AuthRouter'

export default function App () {
  return (
        <Router history={history}>
            <div className="app">
                <Switch>
                    <Redirect from="/" to='/login' exact/>
                    <Route path='/login' component={Login}></Route>
                    
                    // 使用自定义组件代替Route内置组件实现访问控制
                    <AuthRoute path='/home' component={Layout} />
                    {/* <Route path='/home' component={Layout} /> */}
                    
                    <Route component={NotFound}></Route>
                </Switch>
            </div>
        </Router>
  )
}
复制代码