React 路由

Posted 2020-12-26 461770539-qq

　　React 路由

　　　　React 推出两个版本 一个是 react-router 一个是 react-router-dom

　　　　这里使用的是 react-router-dom  因为该方法多了一个  Link 组件

　　　1.　在创建好 React 环境的基础上 下载 react-router-dom

　　　　　　npm install react-router-dom

　　　2. 引入  react-router-dom

　　注意 :  在引入时如果第一个参数只有 HashRouter 时  那么在模板中标签名为<HashRouter>

import {HashRouter as Router,Link,Route} from ‘react-router-dom‘;

　　在下面的模板中

　　　<Router></Router> 为组件导出的容器, 在该标签中只能有一个子节点, <Route>是我们配置项

class App extends Component {    //创建组建类
  render() {
    return (
      <div className="App">
          <Router>
              <div>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/list" component={List}></Route>
              </div>
          </Router>
      </div>
    );
  }
}

　　　　3 . 路由传参

　　　　　　 在 Route 配置项中的 path 中加形参 , 实参则在网址中加入即可

<Route path="/list/:id" component={List}></Route>

　　　　　　如果想要获取实参,需要在 该组件中加 componentDidMount .

class List extends Component {
    render() {
        return (
            <div className="list">
                <p>这是我的列表页</p>
            </div>
        );
    }
    componentDidMount(){
        console.log(this.props.match.params);
    }
}