react入門之路由----react-router的跳轉問題及動態跳轉

目前加載3.0版本的路由：cnpm install --save [email protected]，安裝3.0版本的路由；

學習資料：https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html

引包：

import {Router,Route,Redirect, IndexRoute,hashHistory} from 'react-router';//引入路由

 

render(){
    //debugger
    return(
        
          <div>

           <Router history={hashHistory}>
                  
                  <Route path="/" component={Hello}/>
                  <Route path='/news' component={News}/>
                  <Route  path='/son' component={Son}/>
            </Router>
          </div>
    )
  }
}

ReactDOM.render((<Index/>),document.getElementById("root"))
ReactDOM.render((<Index/>),document.getElementById("root"))

 

同級路由的跳轉，也就是一級路由；

路由傳參：在地址欄是可見參數的；傳遞的參數是字符串/布爾值/數字等基本數據類型；對象或數組無法傳遞;

通過https://react-guide.github.io/react-router-cn/docs/API.html的API文檔，可知，進入跳轉的頁面，可以通過{this.props.params.(傳遞的參數名)}；

具體見代碼：

 

路由文件
<Router history={hashHistory}>
                    
                  <Route path="/" component={Hello}> 
                        <IndexRoute component={Hello}/>
                  </Route>
                     <Route path='news/:num/:id' component={News}/>
                     <Route  path='son' component={Son}/> 
                     <Route path='home' component={Home}/>  
            </Router>

 

 

點擊頁面；
<div>
      		   <Link to={`/news/0/${this.state.id}`}>新來的</Link>
      		   <br/>
      		   <Link to='news/1/我的未來'>不是新來的</Link>
      		   <br/>
      		   <Link to='news/2/愛的味道'>你覺得呢</Link>
      		</div>

跳轉到的頁面
<div className="hello">
	        我是bushi新來的！
	        	{
	        		//this.props.params.
	        	}
	        	{this.props.params.num}
	        	{this.props.params.id}
      </div>

多個鏈接跳轉到同一個頁面；

 

接下來講的是二級路由嵌套：

 

                   <Route path="/" component={Hello}> 
                        <Route  path='son' component={Son}/> 
                        <Route path='home' component={Home}/>
                   </Route>

顯示ui通過this.props.children進行ui顯示；不然就無法顯示ui；

 

多級路由嵌套也就類似於此種方法；

默認路由：

 

  <Router history={hashHistory}>
                    
                  <Route path="/" component={Hello}> 
                  
                        <IndexRoute component={Son}/>
                       
                        <Route path='home' component={Home}/>

                        <Route path='now' component={Now}/>
                  </Route>
                     <Route path='news/:num/:id' component={News}/>
                       
            </Router>

組件外部跳轉：

 

 

 

hashHistory.push('/news/0/window')

 

react路由4.0版本的路由可以直接加載react-router-dom

 

注意幾點：加載引包import，在react-router中會有兩種模式，一種是hash模式，另外一種 瀏覽器模式（利用了history），下文重點介紹好hash模式，hash模式上線本地開發都是非常方便的，而BrowserRouter在上線的時候會比較麻煩一點，需要服務器的配置也會更麻煩一些。

 

import {
  HashRouter,
  BrowserRouter,
  Route,
  Link
} from 'react-router-dom'

在index.jsx文件中

   

<HashRouter>        
    <RouterIndex />
</HashRouter>

頁面內路由跳轉（路由文件router.jsx）；

 

 

<Switch >
<Route exact path="/" component={() => loginQX==1?<Redirect to='/index' />:<Login />}/>
 <Route  path="/index"  component={props => <Index {...props} />}/>
 <Route  path='/detail' component={Detail} />
 <Route       component={() => <div>404</div>} />
</Switch>

這裏需要通過exact這個屬性表示完全匹配，實現單頁面跳轉，簡稱一級路由（父級【‘/index’】）

接下來我們將一級路由跳轉進行分割開，有點感覺就是將路由進行組件化

二級子路由的頁面內跳轉：

<div>
    <NavLink  to={`${match.url}/main`}>資產</NavLink >
    <NavLink  to={`${match.url}/mine`}>我的</NavLink >
    <Switch location={location}>
        <Route       path={`${match.url}/mine`} component={Mine} />
        <Route       path={`${match.url}/main`}  component={Main} />
        <Route render={() => <div>Not Found</div>} />
    </Switch>
 </div>

 

exact： bool
若爲 true，只有當訪問地址嚴格匹配時激活樣式纔會應用

strict: bool
若爲 true，只有當訪問地址後綴斜槓嚴格匹配（有或無）時激活樣式纔會應用

單級路由跳轉完成嚴格匹配的跳產生的，多級路由跳轉訪問斜槓後進行激活產生的。

通過以上的操作可以完成各級的路由的轉換。

 

路由傳參：傳參方式，跟3.0版本一樣，調取有些不一樣，通過{match}獲取參數；但必須要作爲第一個參數；

class Son extends Component{
 	constructor({match},props,context){

 		super()
 		console.log(match);
 		console.log(props);
 		//console.log(context);
 		this.state={
 			match:match
 		}

 	}
  render(){
    return(
      <div className="hello">
         組件傳遞問題！ 
          	{this.state.match.params.id}
      </div>

如果在路由4.x中不存在history問題，下面的代碼可以幫助你，一般不生成history是因爲你採用了xxx as Router,這樣的代碼利用Router代理hashRouter這樣沒有將這個history給繼承過來。以上是我基礎配置react-router4.x問題。

 

import createHistory from 'history/createBrowserHistory';

const history = createHistory()

  <HashRouter  history={history}>
         <RouterIndex />
  </HashRouter>