react项目开发中路由的使用

新式路由的使用官网

一、项目中使用

• 1、安装

  npm install react-router-dom --save

• 2、在项目中基本的使用

  import React, {Component} from 'react';
  // 引入路由的文件  
  import {BrowserRouter,Route,Link} from 'react-router-dom';
  import Home from "./components/Home";
  import About from "./components/About";
  import Topics from "./components/Topics";
  
  export default class App extends Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              <BrowserRouter>
                  <ul>
                      <li><Link to="/">Home</Link></li>
                      <li><Link to="/about">About</Link></li>
                      <li><Link to="/topics">Topics</Link></li>
                      <hr/>
                      {/*注意这个地方path的值要跟上面Link的to一样*/}
                      <Route exact path="/" component={Home}/>
                      <Route path="/about" component={About}/>
                      <Route path="/topics" component={Topics}/>
                  </ul>
              </BrowserRouter>
          )
      }
  }

• 3、exact是一个boolean的值,表示完全匹配

• 4、关于Route传递参数到组件中

  

• 5、利用match创建子路由

  import React, {Component} from 'react';
  // 引入路由的文件  
  import {BrowserRouter,Route,Link} from 'react-router-dom';
  export default class Topics extends Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          console.log(this.props);
          const {match} = this.props;
          return (
              <div>
                  <ul>
                      <li><Link to={`${match.url}/rending`}>rending</Link></li>
                      <li><Link to={`${match.url}/component`}>component</Link></li>
                      <li><Link to={`${match.url}/text`}>text</Link></li>
                  </ul>
                  {/*:xxx传递参数到子组件中*/}
                  <Route path={`${match.url}/:topicsId`} component={Topic}/>
                  <Route exact path={match.url} render={()=>(<h4 style={{'color':'#f00'}}>请选择一个</h4>)}/>
              </div>
          )
      }
  }
  
  class Topic extends Component{
      constructor(props){
          super(props);
      }
      render(){
          //console.log(this.props);
          // 从<Route path={`${match.url}/:topicsId`} component={Topic}/>获取传递过来的参数
          const {match:{params:{topicsId}}} = this.props;
          return(
              <h4>{topicsId}</h4>
          )
      }
  }

• 6、NavLink的使用

  NavLink与Link功能有点类型，我们常用这个来设置选中的样式(activeClassName或activeStyle)

  ...
  // 引入样式(webpack中需要配置)  
  require('./../styles/topics.css');
  ...
  <li><NavLink activeClassName="active" to={`${match.url}/rending`}>rending</NavLink></li>
  <li><NavLink activeClassName="active" to={`${match.url}/component`}>component</NavLink></li>
  <li><NavLink activeClassName="active" to={`${match.url}/text`}>text</NavLink></li>
  ...                  

• 7、Route中显示组件的方式

  • 1、使用component链接到一个组件
  • 2、使用render直接把简单的组件方式写在里面,代码见switch

• 8、switch的使用

  也没什么实在的作用,仅仅是只能匹配一个的作用,下面的代码如果去处switch,那么about中就会匹配多个

  // 引入路由文件
  import {BrowserRouter as Router,Route,Link,NavLink,Switch} from 'react-router-dom';
  ...
  <div>
      <Router>
          <div>
              <ul>
                  <li><Link to="/">Home</Link></li>
                  <li><Link to="/about">About</Link></li>
                  <li><Link to="/123">123</Link></li>
                  <li><Link to="/456">456</Link></li>
              </ul>
              <hr/>
              <Switch>
                  <Route exact={true} path="/" render={()=>(<h3>主页</h3>)}/>
                  <Route path="/about" render={()=>(<h3>about页面</h3>)}/>
                  <Route path="/:itemId" render={({match})=>(<h3>itemId:{match.params.itemId}</h3>)}/>
                  <Route render={()=>(<h3>没有找到页面</h3>)}/>
              </Switch>
          </div>
      </Router>
  </div>
  ...

• 9、重定向(Redirect)

  简单的可能就是判断用户没登录就跳转到登录页面

  // 引入路由文件
  import {BrowserRouter as Router, Route, Link, Redirect} from 'react-router-dom';
  let login = false;
  ...
  render() {
      return (
          <Router>
              <div>
                  <ul>
                      <li><Link to="/">Home</Link></li>
                      <li><Link to="/about">About</Link></li>
                      <li><Link to="/login">login</Link></li>
                  </ul>
                  <hr/>
                  <Route exact={true} path="/" render={()=>(login?<h3>主页</h3>:<Redirect to="/login"/>)}/>
                  <Route path="/about" render={()=>(<h3>about页面</h3>)}/>
                  <Route path="/login" render={() =>(<h3>请登录</h3>)}/>
              </div>
          </Router>
      )
  }
  ...