react路由的安裝及格式和使用方法

react路由的安裝：

在要創建項目的目錄命令窗里輸入：

cnpm install -g create-react-app

create-react-app  項目名

在創建好的項目目錄命令窗里輸入：

cnpm install react-router-dom --save（此處可以不用--save但是為了方便別人調用你的包時。更快捷的安裝好依賴包，我們就得要寫了，（cnpm install命令可以自動安裝路由依賴文件））

 

 

 

2.根據路徑，顯示相應的組件

，

JSX路由的寫法，路由的jsx組件

 

 

const Basic = () => (

<Router>

<div>

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/page1">Page1</Link></li>

<li><Link to="/page2/123">Page2</Link></li>

</ul>

 

<hr/>

 

<Route exact path="/" component={App}/>

<Route path="/page1" component={Page1}/>

<Route path="/page2/:id" component={Page2}/>

</div>

</Router>

)

 

exact：表示精確路勁

3.路由視圖的格式：

<router>

//只能放置一個根元素比如一個div

<div>

//視圖里，如果要實現內容相對應的跳轉

<Link to='路徑'></Link>

//決定什么路徑顯示什么組件

<route path='路徑' component={組件名}>

</div>

</router>

 

4.動態路由：一個組件要根據路由變量顯示不同的內容，路由變量通過props傳值

<route path='/路徑名/：變量名稱' component={組件名}>

 

function Page2(props){

props.match.params.變量名稱

return  相應的視圖

}

 

 

3/路由試圖的格式：

 

<Router>

 

//這里只能放置1個根元素

 

<div>

 

 

//試圖里，如果需要內容的相對應的跳轉，那么需要使用<link>

 

<Link to='/page1'>進入page1頁面</Link>

 

 

//決定什么路徑顯示什么組件

 

<Route path='/page1' component={App} >

 

 

 

</div>

 

 

</Router>

 

 

 

 

4/動態路由：1個組件要根據，路由變量從而顯示不同的內容，路由變量通過props進行傳值

 

 

<Route path='/page2/ :變量名稱' component={Page2} >

 

 

function Page2(props){

 

 //通過props里的match屬性獲取相對應的變量

 

 props.match.params.變量名稱

 

 

 

 return 相對應的試圖

 

 

}

 

 

 

5/JS執行頁面跳轉

 

this.props.history.go(),前進/后退頁面

 

this.props.history.goback(),返回頁面

 

this.props.history.goforward,前進頁面

 

 

 

 

6//路徑直接跳轉

 

this.props.history.push('路徑名稱')，跳轉到相對應的路徑