react-router快速入门教程

react-router

1.react-router是一款主要负责前端路由的技术栈
2.在react-router中，总共分为4个包

• react-router：核心包
• react-router-dom：在浏览器端使用的 router 包
• react-router-native：react native 上面的路由导航（开发手机 App）
• react-router-config：配置相关的包
  注意：我们在搭建项目的时候，只需直接安装 react-router-dom 包即可，这个包里面就已经包含了 react-router 核心包里面的内容
  3.接下来就进行安装，安装完成后，我们就在index.js中引入组件：

import {HashRouter, BrowserRouter} from 'react-router-dom'
// HashRouter 代表是 Hash模式
// BrowserRouter 代表的是 history 模式
ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

然后我们再到App.js中配置路由
具体代码如下：

import React from 'react'
import { Route, Switch, Redirect, NavLink } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

function App() {
  return (
    <div>
      {/* 页头 */}
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>

      <div className="row">
        {/* 左边导航 */}
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/*导航路由链接*/}
            <NavLink className="list-group-item" activeClassName='activeClass' to='/home'>Home</NavLink>
            <NavLink className="list-group-item" activeClassName='activeClass' to='/about'>About</NavLink>
          </div>
        </div>
        {/* 右边内容区域 */}
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/*可切换的路由组件*/}
              <Switch>
                <Route path='/home' component={Home} />
                <Route path='/about' component={About} />
                <Redirect to='/home' />
              </Switch>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;

4.嵌套路由
在vue-router中我们是在router.js中通过书写children属性来进行嵌套路由的
但在在 react-router，没有配置，就直接在要嵌套组件里面继续书写 NavLink 和 Route 即可。
代码如下：

import React from 'react'
import { Route, Switch, Redirect, NavLink } from 'react-router-dom'
import News from './News'
import Message from './Message'

// Home 视图组件
export default function Home() {
  return (
    <div>
      <h2>Home 组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink to="/home/news">News</NavLink> 
          </li>
          <li>
            <NavLink to="/home/message">Message</NavLink> 
          </li>
        </ul>
        <Switch>
          <Route path="/home/news" component={News}/>
          <Route path="/home/message" component={Message}/>
          <Redirect to='/home/news' />
        </Switch>
      </div>
    </div>
  )
}

5.react-router中向路由传递参数
首先，我们需要在跳转的 url 后面跟一个动态的参数，例如：

<NavLink to={`/detail/${item.id}`}>详情</NavLink>

接下来要接收这个动态的参数，通过props.match.params.参数名来接收.

componentDidMount(){
   let id = this.props.match.params.id;
   Axios.get(`http://localhost:3000/users/${id}`)
     .then(res=>{
     this.setState({
       userInfo : res.data
     })
   })
 }