react 路由完整版「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

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,Routes} from 'react-router-dom'
		Switch:重复路径只匹配第一个
		Routes:v6版本用来替代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>
        )
    }
}