React router

简单使用

react-router-dom api

react-router/packages/react-router-dom/docs/api at v5 · remix-run/react-router · GitHub

• index.js 中使用

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom'
import Home from './Home'
import News from './News'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router>
      <Link to='/home'>Home 组建</Link>
      <Link to="/news">News 组建</Link>
      <Switch>
        <Route  exact path='/home'><Home></Home></Route>
        <Route path="/news" component={News}><News></News></Route>
      </Switch>
    </Router>
);

exact 精确匹配

Link 类似于。<a href=''></a> 标签

• index.js 与 app.js 结合使用

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router>
     <App></App>
    </Router>
);
//app.js
import React from 'react';
import './App.css';
import Home from './Home'
import News from './News'
import {Route,Link,Switch} from 'react-router-dom'
class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    return <div>
      <h1>react 路由</h1>
      <Link to='/home'>Home 组建 </Link>
      <Link to="/news">News 组建</Link>
      <Switch>
        <Route  exact path='/home'><Home></Home></Route>
        <Route path="/news" component={News}><News></News></Route>
      </Switch>
    </div>
  }
}
export default App;

• app.js 中使用

//app.js
import React from 'react';
import './App.css';
import Home from './Home'
import News from './News'
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom'
class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    return <Router>
      <h1>react 路由</h1>
      <Link to='/home'>Home 组建 </Link>
      <Link to="/news">News 组建</Link>
      <Switch>
        <Route  exact path='/home'><Home></Home></Route>
        <Route path="/news" component={News}><News></News></Route>
      </Switch>
    </Router>
  }
}
export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
     <App></App>
);

路由嵌套

//Hone 组建中 index.js
//App.js 同上
import React from 'react';
import './index.css';
import Son1 from '../Son1';
import Son2 from '../Son2';
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom'
class Home extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    return <div>
      <h3>这是home组建 2</h3>
      <Router>
        <Link to="/home/link1">Son1 组建</Link>
        <Link to="/home/link2">Son2 组建</Link>
        <Switch>
          <Route exact path='/home/link1'><Son1></Son1></Route>
          <Route path='/home/link2' component={Son2}></Route>
        </Switch>
      </Router>
    </div>
  }
}
export default Home;

 

 

 

 

 属性

Router的属性

• basename 路由大基本路径

<Router basename='/home'></Router>

render(){
    return <div>
      <h3>这是home组建 2</h3>
      <Router basename='/home'>
        <ul>
          <li> <Link to="/link1">Son1 组建</Link></li>
          <li><Link to="/link2">Son2 组建</Link></li>
        </ul>
        <Switch>
          <Route exact path='/link1'><Son1></Son1></Route>
          <Route path='/link2' component={Son2}></Route>
        </Switch>
      </Router>
    </div>
  }

 

Route的属性

• path 路径匹配
• component 对应组建

1. <Route path='/link2' component={Son2}></Route>

2. <Route path='/link2' component={()=><Son2/>}></Route>

• render    可替代component

       <Route path='/link2' render={()=><Son2/>}></Route>

 Link 的属性

to  string/object

<Link to="/link1">Son1 组建</Link>

<li><Link to={{
            pathname:'link2'
          }}>Son2 组建</Link></li>

Redirect 的属性 

from. 从哪来

to。到哪去

      <Router basename='/home'>
        <ul>
          <li> <Link to="/link1">Son1 组建</Link></li>
          <li> <Link to="/link3">重定向</Link></li>
        </ul>
        <Redirect from='/link3' to="/link2"></Redirect>
      </Router>

路由传参

• ? 传递参数.         this.props.location.search. 获取参数
• / 传递参数           this.props.match.params 获取参数

import React from 'react';
import './index.css';
import { withRouter } from 'react-router-dom'
class News extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    console.log(this.props.match.params)
    return <div>
      <h3>这是新闻组建2</h3>
    </div>
  }
  componentDidMount(){
    console.log(this)
  }
}

export default withRouter(News);