react 路由完整版

雨点打透心脏的1/2处 2021-07-24 19:14 466阅读 0赞

cnpm install -S  react-router-dom@4.3.1
    
    1、用BrowserRouter管理整个应用
    	import {BrowserRouter} from 'react-router-dom'
    	
    	在index.js中,将<App />用<BrowserRouter>包裹起来,内部只能有一个根容器
    
    2、路由跳转
    	import {NavLink,Link} from 'react-router-dom'
    		NavLink和Link都可以实现,且用法相同
    		
    		<NavLink to='/about'>About</NavLink>
        	<NavLink to='/home'>home</NavLink>
        	
    3、路由显示(放在哪就在哪显示)
    	import {Switch,Route} from 'react-router-dom'
    		Switch:重复路径只匹配第一个
    		exact:精准匹配,一般放置在根路由,当'/'和'/xx',将exact放置在'/'路由上,访问'/xx'不会显示'/'
    		strict:严格匹配,即'/main'和'/mian/'不一样
    	
    	<Route exact path='/' component={Home}></Route>
    	<Route path='/about' component={About}></Route>
    
    4、路由重定向
        import {Redirect} from 'react-router-dom'
        	不能放置在路由显示的第一个位置，否则无法触发
        	打开页面浏览器会自动重定向到'/about'路由  
        <Redirect to='/about'></Redirect>
        <Redirect from='/当前路由' to='/指定路由'> 从当前路由跳转到指定路由
        
        	其中在动态使用重定向需要return
        		        if(xx)
    			        {
    			            return <Redirect to={redirectTo}></Redirect>
    			        }
    
        		
      
    5、路由高亮选中样式
    	<NavLink to='/home' activeClassName="selected">home</NavLink>
    		封装标签后:
    			在标签上使用 {...this.props}  能将组件传递的参数/样式,全部放进标签上
    
    6、路由嵌套
    	父路由:
    		NavLink指定跳转链接,路径要加上父路由的路径,'/x/xx'
    		Switch和Route指定子路由显示位置
    		Redirect对子路由重定向
    
    7、路由跳转携带参数
    	参数传递以及参数名设置
    		NavLink中:to={to='/home/msg/detail/参数'},变量使用{`${}`}或字符串拼接
    		Route中:path='/home/msg/detail/:接收参数名?'
    			‘?’号表示为可选参数
    		
    	调用参数:
    		this.props.match.params.参数名
    
    8、动态跳转
    	this.props.history.push('路径'') /('路径',{参数键值对})
    	this.props.history.replace('xx')
    	this.props.history.go(数值);  根据栈来跳转
    	this.props.history.goBack();
    	this.props.history.goForward();
    	
    	方式一:
    		<Route path='/home/msg/detail/:id' component={Detail}> </Route>
    		回调中:this.props.history.push('/home/msg/detail/5')
    		接收:{this.props.match.params.id}
    		
    	方式二:
    		回调中:this.props.history.push('/home/msg/detail',{id:5})
    		接收:{this.props.location.state.id}
    		
    9、获取当前路由的url('/xx')
    		this.props.location.pathname;
    		
    10、非路由组件使用路由组件属性(props.history等)
    		import {withRouter} from 'react-router-dom'
    		最后导出组件:export default withRouter(组件);
    		
    11、离开页面弹窗
    		import {Prompt} from 'react-router-dom'
    		
    		<Prompt 
    			when={触发条件}   不写,则离开当前页面时触发弹窗
    			message='弹窗内容' / {(location)=>{ 可以通过函数返回内容 }}
    		/>

代码示例:  
index.js:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { BrowserRouter} from 'react-router-dom'
    
    ReactDOM.render(
      <BrowserRouter>
          <App />
      </BrowserRouter>
    ,
      document.getElementById('root')
    );
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

App.js:

import React from 'react';
    import './App.css';
    import About from './views/about'
    import Home from './views/home'
    import { NavLink,Switch,Route,Link,Redirect} from 'react-router-dom'
    
    import CADD from './components/comment_add/commentAdd.jsx';
    import CAI from './components/comment_list/commentList';
    class App extends React.Component{ 
      state={ 
        searchName:''
      }
    
      setName=(searchName)=>{ 
        this.setState({ 
          searchName:searchName
        });
    
      }
      render()
      { 
        
        return(
          
          <div>
            <NavLink to='/about' activeClassName="selected" >About</NavLink>
            <NavLink to='/home'  activeClassName="selected">home</NavLink>
    
              <div>
                <Switch>
                  <Route path='/about' component={ About} ></Route>
                  <Route path='/home' component={ Home}></Route>
                  <Redirect to='/about'></Redirect>
                </Switch>
              </div>
          </div>
        )
      }
    
    }
    
    export default App;

子路由:

import React,{  Component } from "react";
    import { NavLink,Route,Redirect,Switch} from 'react-router-dom'
    import News from './news';
    import Msg from './msg';
    import './home.css';
    
    export default class App extends Component{ 
        
        render()
        { 
            return(
                <div>
                    <div>
                        <NavLink to='/home/news' activeClassName='selected2'>news</NavLink>
                        <NavLink to='/home/msg' activeClassName='selected2'>msg</NavLink>
                    </div>
    
                    <Switch>
                        <Route path='/home/news' component={ News}></Route>
                        <Route path='/home/msg' component={ Msg}></Route>
                        <Redirect to='/home/news'></Redirect>
                    </Switch>
    
                </div>
            )
        }
    }

子子路由:

import React,{  Component } from "react";
    import { NavLink,Route,Redirect,Switch} from 'react-router-dom'
    import './home.css';
    import Detail from './detail';
    
    export default class App extends Component{ 
        
        render()
        { 
            return(
                <div>
                    <ul>
                        <NavLink activeClassName='selected2'to='/home/msg/detail/1'>msg1</NavLink>
                        <NavLink activeClassName='selected2'to='/home/msg/detail/2'>msg2</NavLink>
                        <NavLink activeClassName='selected2'to='/home/msg/detail/3'>msg3</NavLink>
                    </ul>
                    <button onClick={ this.back}>返回</button>
                    <button onClick={ this.go}>前进</button>
                    <div>
                        <Switch>
                            <Route path='/home/msg/detail' component={ Detail}> </Route>
                        </Switch>
                    </div>
    
                </div>
               
            )
        }
        back=()=>{ 
            this.props.history.push('/home/msg/detail',{ id:5})
        }
        go=()=>{ 
    
        }
    }

子子子路由:

import React,{  Component } from "react";
    
    export default class App extends Component{ 
        
        render()
        { 
            return(
                <div>
                    { /* <li>{this.props.match.params.id}</li> */}
                    <li>{ this.props.location.state.id}</li>
    
                </div>
            )
        }
    }