preface
The code source is the teaching video of shangsilicon Valley in station B, which can be combined with the previous routing articles [react framework] learning record 9- learning how to use react router DOM
The React Router is published to npm in three different packages:
-
React Router: the core library of routing, which provides many components and hooks.
-
React router DOM: it contains all the contents of react router and adds some components specially used for DOM, such as < browserrouter >.
-
React router native: includes all the contents of react router, and adds some API s specially used for ReactNative, such as < nativerouter >.
--Shang Silicon Valley md file
install
yarn add react-router-dom
Version 6 is installed by default
Select routing mode
history
... import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') )
hash
The usage is the same, just change the label to HashRouter
LInk/routes/route
Put these together. routes replaces the original switch and is mandatory. If you don't write react, an error will be reported.
import {NavLink,Routes,Route} from 'react-router-dom' <Link className="item" to="/about">About</NavLink> <Link className="item" to="/home">Home</NavLink> <Routes> <Route path="/about" element={<About/>}/> // Note that the writing of component registration has changed <Route path="/home" element={<Home/>}/> </Routes>
The Route tag supports a property caseSensitive. When it is true, the path of the Route turns on the strict matching mode. The default is false, and the path is case insensitive.
Navigate
Replaced Redirect tag
import React,{useState} from 'react' import {Navigate} from 'react-router-dom' export default function Home() { const [sum,setSum] = useState(1) return ( <div> <h3>I am Home Content of</h3> {/* The value of sum determines whether to switch views */} {sum === 1 ? <h4>sum The value of is{sum}</h4> : <Navigate to="/about" replace={true}/>} <button onClick={()=>setSum(2)}>Point I will sum Change to 2</button> </div> ) }
There is a replace attribute. When it is true, the push mode becomes replace mode.
Note: when rendering the navigation tag, if the navigation tag is not in routes, it will jump to the corresponding component page instead of rendering as a sub component.
Navlink
Discard the activeClassName attribute and use the className to complete the activation style. You can write a function. The default input parameter is an object with an attribute isActive identifying whether it is activated:
<NavLink to="login" className={({ isActive }) => { console.log('home', isActive) return isActive ? 'base one' : 'base' }} >login</NavLink>
If there are multiple NavLink tags, you can write a method and directly execute it in className to achieve the effect of reuse.
Nested routes will be mentioned later. When the NavLink label of the child route is highlighted, the NavLink of the parent route is also highlighted. If the business needs do not need the NavLink of the parent route to be highlighted, you can add the end attribute to the NavLink label of the parent to cancel the highlighting after the child route is matched.
<NavLink to="home" end >home</NavLink>
useRoutes uses routing tables
It is the same as the unified routing management of Vue router.
It can be found in Src / routes / index Create routing table configuration in JS
import About from '../pages/About' import Home from '../pages/Home' import {Navigate} from 'react-router-dom' export default [ { path:'/about', element:<About/> }, { path:'/home', element:<Home/> }, { path:'/', element:<Navigate to="/about"/> } ]
Then, in the component that needs to display the routing component:
import React from 'react' import {NavLink,useRoutes} from 'react-router-dom' import routes from './routes' export default function App() { //Generate corresponding routing rules according to the routing table const element = useRoutes(routes) return ( <div> ...... {/* Register routing */} {element} ...... </div> ) }
Nested Route
First, write the sub routing configuration in the routing table
const element = useRoutes([ { path:'/about', element:<About/> }, { path:'/home', element:<Home/>, children:[ { path:'news', element:<News/> }, { path:'message', element:<Message/>, } ] } ])
Then use the Outlet tag for display. The principle is the same as that of vue's router view tag:
import React from 'react' import {NavLink,Outlet} from 'react-router-dom' export default function Home() { return ( <div> <h2>Home Component content</h2> <div> <ul className="nav nav-tabs"> <li> <NavLink className="list-group-item" to="news">News</NavLink> </li> <li> <NavLink className="list-group-item" to="message">Message</NavLink> </li> </ul> {/* Specifies the location where the routing component is rendered */} <Outlet /> </div> </div> ) }