React Router

Router

router的使用

app整体包裹一个HashRouter或者BrowserRouter组件

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './pages/App';
import { Provider } from 'react-redux'
import store from './store'
import { storeContext } from './myConnect'
import { HashRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <storeContext.Provider value={store}>
            <HashRouter>
                <App />
            </HashRouter>
        </storeContext.Provider>
    </Provider>
);

组件使用

import React, { PureComponent } from 'react'
import About from './about'
import Home from './Home'
import { Routes, Route, Navigate } from 'react-router-dom'

export class App extends PureComponent {
  render() {
    return (
      <div >
        <h1>Hello CodeSandbox</h1>
        <Routes>
          <Route path="/" element={<Navigate to="/home" />}></Route>
          <Route path="/about" element={<About />}>
          
          </Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='*' element={<Home />}></Route>
        </Routes>
      </div>
    )
  }
}

export default App

嵌套使用

使用组件

// app组件中    
import React, { PureComponent } from 'react'
import About from './about'
import Home from './Home'
import AboutMe from './aboutMe'
import AboutContact from './aboutContact'
import AboutHiring from './aboutHiring'
import { Routes, Route, Navigate } from 'react-router-dom'

export class App extends PureComponent {
  render() {
    return (
      <div >
        <h1>Hello CodeSandbox</h1>
        <Routes>
          <Route path="/" element={<Navigate to="/home" />}></Route>
          <Route path="/about" element={<About />}>
            <Route path="/about" element={<Navigate to="/about/me" />}></Route>
            <Route path='/about/me' element={<AboutMe />}></Route>
            <Route path='/about/hiring' element={<AboutHiring />}></Route>
            <Route path='/about/contact' element={<AboutContact />}></Route>
          </Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='*' element={<Home />}></Route>
        </Routes>
      </div>
    )
  }
}

export default App

二级页面占位

about组件中需要使用outlet组件占位

import { connect } from '../myConnect'
import { addNumber, subNumber } from '../store/reducer'
import React, { PureComponent } from 'react'
import { Outlet } from 'react-router-dom'

export class About extends PureComponent {
    render() {
        const { count, addCount, subCount } = this.props
        return (
            <div>
                <div>About</div>
                <div> count: {count}</div>
                <button onClick={e => addCount(1)}>+</button>
                <button onClick={e => subCount(1)}>-</button>
                <br />
                <Outlet></Outlet>
            </div>
        )
    }
}

抽取配置形式

配置文件

import Home from '../pages/Home'
import AboutMe from '../pages/aboutMe'
import AboutContact from '../pages/aboutContact'
import AboutHiring from '../pages/aboutHiring'
import { Navigate } from 'react-router-dom'
import React from 'react'

const About = React.lazy(() => import('../pages/about'))

export const routes = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />,
        children: [
            {
                path: '/about',
                element: <Navigate to="/about/me" />
            },
            {
                path: '/about/me:id',
                element: <AboutMe />
            },
            {
                path: '/about/hiring',
                element: <AboutHiring />
            },
            {
                path: '/about/contact',
                element: <AboutContact />
            }
        ]

    },
    {
        path: '*',
        element: <Home />
    }
]

应用

import React from 'react'
import { routes } from '../router'
import { useRoutes } from 'react-router-dom'

export function App() {
  return (
    <div >
      <h1>Hello CodeSandbox</h1>
      {useRoutes(routes)}
    </div>
  )

}

export default App

Suspense

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './pages/App';
import { Provider } from 'react-redux'
import store from './store'
import { storeContext } from './myConnect'
import { HashRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <storeContext.Provider value={store}>
            <Suspense fallback={<h3>loading....</h3>}>
                <HashRouter>
                    <App />
                </HashRouter>
            </Suspense>
        </storeContext.Provider>
    </Provider>
);

传参

Path

path: '/about/me:id'

query