react路由傳值有幾種方式

react路由傳值有三種方式：1、「props.params」方法，該方法可以傳遞一個或多個值，但是每個值的類型都是字串，沒法傳遞一個物件；2、query方法，該方法類似表單中的get方法，傳遞參數為明文，但是刷新頁面參數會遺失；3、state方法，該方法取得參數時要用“this.props.match.params.name”，並且刷新頁面參數也會丟失。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react路由傳值有幾種方式

路由傳值的方法有三種

1.props.params（推薦）

//設定路由<Router history={hashHistory}> <Route path='/user/:name' component={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App extends React.Component { render() { return ( <Link to="/user/sam">使用者</Link> // 或hashHistory.push("/user/sam"); ) } }

當頁面跳到UserPage頁面之後，取出傳過來的值：

export default class UserPage extends React.Component{ constructor(props){ super(props); } render(){ return(<div>this.props.match.params.name</div>) }}

上面的方法可以傳遞一個或多個值，但是每個值的類型都是字串，沒法傳遞一個物件,如果傳遞的話可以將json物件轉換為字串，然後傳遞過去，傳遞過去之後再將json字串轉換為物件將資料取出來

//定義路由<Route path='/user/:data' component={UserPage}></Route>//設定參數var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//傳值<Link to={path}>使用者</Link>//或hashHistory.push(path);//取得參數var data = JSON.parse(this.props.params.data);var {id,name,age} = data;

2.query（不建議:刷新頁面參數遺失）

query方式使用很簡單，類似表單中的get方法，傳遞參數為明文

//定義路由<Route path='/user' component={UserPage}></Route>//設定參數var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//傳值<Link to={path}>使用者</Link>//或hashHistory.push(path);//取得參數var data = this.props.location.query ;var {id,name,age} = data;

3.state（不推薦，刷新頁面參數遺失）

state方式類似post方式，使用方式和query類似

//設定路由<Route path='/user' component={UserPage}></Route>//設定參數var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//傳值<Link to={path}>使用者</Link>//或hashHistory.push(path);//取得參數var data = this.props.location.state ;var {id,name,age} = data;

特別提示：

1，取得參數時要使用this.props.match.params.name

2，如果在子元件裡印出要記得傳this.props，如下：

class Todolist extends Component { render() { return ( <DocumentTitle title="todolist"> <div id="home-container"> <section> <TodolistList {...this.props}/> //不傳的話this .props為空物件</section> </div> </DocumentTitle> ); } }export default Todolist;