1. How to render the React routing page

React Router uses the Route component to render a Route page, and only one Route component can render a Route page. React Router uses the Route component to render a Route page

1. General rendering:

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'
// Root component App
export default function App () {
  return (
        <Router>
            <div className="app">
                <Switch>// Each Route corresponds to a page component<Redirect from="/" to='/login' exact/>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/home' component={Layout} />
                    <Route component={NotFound}></Route>
                </Switch>
            </div>
        </Router>)}Copy the code

The BrowserRouter component indicates that the route uses HTML5 History mode to jump to the page.

Vue Router creates a Router instance object with the build option mode set to history:

Vue.use(Router)
const router = new Router({
  mode: 'history'
})
export default router
Copy the code

If you want to jump to a page using a URL hash value, you can wrap the Route component with a HashRouter. For more information about hashRouters and BrowserRouters, see :React Router

2. How to set the rendering mode of routing page content

In addition to the normal rendering method, there are two other properties on the Route component that allow you to set the content to be rendered in the Route page.

  • renderThe React function returns a React component.
  • childrenThe React function returns a React component.
  • componentThe value is a React component. (Normal mode)

1. The children

<Route
        path = '/home'
        children={() = > {
          return (
            <div>Children renders the routing page</div>
          )
        }}
      />
Copy the code

2. The render mode

<Route
        path = '/home'
        render={() = > {
          return (
            <div>Render Renders the routing page</div>
          )
        }}
      />
Copy the code

3. The children mode and the render mode function

Render ={component}; render ={children}; render ={children};

// Decide which page to go to based on whether there is a Token similar to the beforeEach guard in Vue
<Route
        path = '/home'
        render={() = > {
          if (Token) {
            return (
              <Home/>)}else{
            return <Redirect to="/login" />
          }
        }}
      />
Copy the code

3. Access control

1. Customize component control access permissions

// Some pages of the custom component require a token to access (directly modify the URL in the address bar to the home page, redirect to login)
import { Route, Redirect } from 'react-router'

export default function AuthRoute (props) {
// console.log(props)
  const Com = props.component
  // return 
      

       xxxx
      

  return (
    <Route
      path={props.path}
      render={(props)= > {
        // console.log(props, '0000000')
        if (hasToken()) {
          return <Com />} else {// console.log(' No token.... ') return<Redirect to="/login" />
        }
      }}
    />)}Copy the code

2. Import and use user-defined components in the routing rule file

// Import custom components
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>// Use custom components instead of Route built-in components for access control<AuthRoute path='/home' component={Layout} />{/ *<Route path='/home' component={Layout} />* /}<Route component={NotFound}></Route>
                </Switch>
            </div>
        </Router>)}Copy the code