This is the 18th day of my participation in the August Challenge

React library => react-router-dom

CNPM install react-router-dom –save

ReactRouter has three major components:

  • Router: The root component (underlying component) of all routing components and the outermost container that wraps routing rules
  • Route: displays the components corresponding to the current rule
  • Link: route redirect component
  • Redirect: Indicates route redirection
  • Replace: Cannot go back after going forward, often used after logging in
  • Push: page stack +1
  • Switch: When a route has the same path, only the first path is displayed by default
  • The switch:
import react from 'react' import { BrowserRouter as Router, Link, Route, Redirect, Switch } from 'react-router-dom' class App extends react.Component { render() { return ( <div> <Router> <Switch> <Route Path ="/" exact component={() => (<h1> home </h1>)}></Route> <Route path="/form" exact component={FormCom}></Route> <Route Path ="/login" exact component={() => (< H1 > Login </h1>)}></Route> <Route path="/loginInfo" exact component={loginInfo }></Route> <Route path="/abc" exact component={() => (<h1>123</h1>)}></Route> <Route path="/abc" exact component={() => (< h1 > < / h1 > 1234)} > < / Route > < / Switch > < / Router > < / div >)}} localhost: 3000 / ABC = > show only 123Copy the code

Note: For an exact match, you can set the exact attribute on the route

Import React from 'React' import ReactDom from 'react-dom' // hash mode // import {HashRouter as Router, Link, Route} from 'react-router-dom' import {BrowserRouter as router, Link, Route} from 'react-router-dom' function Home() {return (<div> <h1> </h1> </div>)} function Product() {return ( The < div > < h1 > product page < / h1 > < / div >)} function Me () {return (< div > < h1 > I < / h1 > < / div >)} / / Router: The root component of all routing components (bottom component), which wraps the outermost container of routing rules // Route: routing rule matching component, which displays the component corresponding to the current rule // Link: Constructor (props) {super(props) this.state = {}} render() {return (<div) Router basename="/"> {/* basename is a prefix */} <div className="nav"> <Link To = "/" > Home < / Link > < Link to = "/ product" > product < / Link > < Link to = "/ me" > personal center < / Link > < / div > < the Route path = "/" exact component={ Home }></Route> <Route path="/product" component={ Product }></Route> <Route path="/me" component={ Me }></Route> </Router> </div> ) } } ReactDom.render(<App />, document.getElementById('root'))Copy the code

The LINK component can set the to property to jump to a page. The TO property can be written to a string directly or through an object to set the path

Such as:

Import React from 'React' import ReactDom from 'react-dom' // hash mode // import {HashRouter as Router, Link, Route} from 'react-router-dom' import {BrowserRouter as router, Link, Route} from 'react-router-dom' function Home() {return (<div> <h1> </h1> </div>)} function Product() {return ( <div> </div>)} function Me(props) {console.log(props) return (<div> <h1> </div>)} // Router: The root component of all routing components (bottom component), which wraps the outermost container of routing rules // Route: routing rule matching component, which displays the component corresponding to the current rule // Link: Class App extends React.Com {constructor(props) {super(props) this.state = {}} render() {const meObj = {pathname: "/me", // jump path search: '? Username =admin', // get request data hash: '# ABC ', // set hash value state: {MSG: Return (<div ID ="app"> <div> all common page contents </div> <Router basename="/"> {/* basename <div className="nav"> <Link to="/">Home</Link> <Link to="/product"> product </Link> <Link to={meObj }> Personal center </Link> {/* replace delete page stack, */} <Link to={meObj} replace> personal center </Link> </div> <Route path="/" exact component={Home}></Route> <Route path="/product" component={ Product }></Route> <Route path="/me" component={ Me }></Route> </Router> </div> ) } } ReactDom.render(<App />, document.getElementById('root'))Copy the code

Link’s replace property: When the link is clicked, the new address is replaced with the original address of the historical access record

Dynamic Routing implementation

Redirect component: If a component is accessed and there is a redirect component, the page path is modified so that the page appears as the contents of the directed path

import React from 'react' import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom' function LoginInfo(props) { console.log(props) if(props.location.state.loginState ===  'success') return <Redirect to="/admin"></Redirect> else return <Redirect to="login"></Redirect> } const FormCom = () => { const pathObj = { pathname: '/loginInfo', state: { loginState: 'SUCCESS'}} return (<div> < H1 > form validation </ H1 > <Link to={pathObj}> Login validation page </Link> </div>)} class App extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div> <Router> <Route path="/" Exact component={() => (<h1> home </h1>)}></Route> <Route path="/form" exact component={FormCom}></Route> <Route Path ="/login" exact component={() => (< H1 > Login page </h1>)}></Route> <Route path="/loginInfo" exact component={loginInfo }></Route> </Router> </div> ) } } export default AppCopy the code

The last

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Comments are written into the code, please forgive me