react-router

使用react怎么能少了router的使用

react-router

• 使用react-router-dom进行路由

  npm install react-router-dom --save
  

• 模式使用

  相比于vuejs的模式使用react略有不同 ，vue的模式是在配置里边设置是否使用history模式，而react则是通过使用不同的组件来使用history模式还是hash模式

  • HashRouter ：哈希模式
  • BrowserRouter：

  import {BrowserRouter,HashRouter} from "react-router-dom"
  //在外层再包一层HashRouter或者BrowserRouter
  ReactDOM.render(
      // 外层包一层Provider ，提供数据和组件间的数据传递一样
      <HashRouter>
          <Provider store={store}>
              <App />
          </Provider>
      </HashRouter>,
      document.getElementById('root')
  );
  
  

  //  app.js   
  class App extends Component{
      render() {
          return <div>
              <div>
                  <Link to="/">首页</Link>
                  <Link to="/about">关于</Link>
                  <Link to="/detail">详情</Link>
              </div>
              <Route exact path="/" component={Counter}/>  // exact 全部匹配根路径
              <Route path="/about" component={About}/>
              <Route path="/detail" component={Detail}/>
          </div>
      }
  }
  function About() {
      return <div>
          <h2>关于页面</h2>
      </div>
  }
  function Detail() {
      return <div>
          <h2>这是我们的详情页面</h2>
      </div>
  }
  

• 路由参数

  和vue路由的使用一样 ，是使用：id的形式定义参数

  //  使用 detail 
  <Route path="/detail/:id" component={Detail}></Route>
  function Detail(props) {
      return <div>
          <p>Detail:{props.match.params.id}</p>  
          <h2>这是我们的详情页面</h2>
      </div>
  }
  

• Redirect ：跳转

  <Redirect to="/"> </Redirect>  // 跳转到连接
  

• dva

  redux + redux-sage + react-redux + react-router-dom = dva

• 使用的react -router-dom

  install react-router-dom --save
  

• 使用模式

  使用模式相比于vuejs不同，vue里面是配置是否使用history模式，而react中是使用不同的组件进行区分

  HashRouter