react router - 通過url參數傳遞道具

我正在開發一個多語言和多貨幣的應用程序，它使用react-router,react-router-redux & react-router-bootstrap進行路由。react router - 通過url參數傳遞道具

目前，用戶在使用默認的語言和貨幣的應用程序到達，但是我想能夠提供的網址一些參數來設置用戶的語言或貨幣 - 這是沿http://myapp.com/page1?lang='fr'

我行'd還希望能夠在任何頁面上使用這些參數，因此：

http://myapp.com/page1?lang='fr'和http://myapp.com/page2/example1/test?lang='ru'都以相同的方式處理。基本上我希望路由器檢查傳遞給它的任何url中是否存在這些參數，如果它們存在，則執行一個函數。

我在react-router的文檔中找不到關於此的任何明確信息，但我確定這是可能的。任何人都可以將我指向正確的方向嗎？

來源

2017-02-22 oldo.nicho

您可以通過 this.props.location.query.langs從也@Lucas提到的組件內部訪問查詢參數。

我提供了一個工作示例，以便更好地理解。

除此之外在您的方案中，我會建議您查看onEnter鉤子在反應路由器中可用。

let Router = ReactRouter.Router; 
 
let RouterContext = Router.RouterContext; 
 
let Route = ReactRouter.Route; 
 
let Link = ReactRouter.Link; 
 

 
function redirectBasedOnLang(nextState, replace) { 
 
    // check nextState.location.query 
 
    // and perform redirection or any thing else via 
 
    console.log("called"); 
 
    console.log(nextState.location.query); 
 
} 
 

 
const Dashboard = (props) => { 
 
    return (
 
    <b className="tag">{"Dashboard"}</b> 
 
); 
 
} 
 

 
FrDashboard 
 

 
const FrDashboard = (props) => { 
 
    return (
 
    <div> 
 
     <h3> Dashboard </h3> 
 
     <hr/> 
 
     Primary language: {props.location.query.lang} 
 
    </div> 
 
); 
 
} 
 
    
 
class App extends React.Component { 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>App</h2> 
 

 
     {/* add some links */} 
 
     <ul> 
 
     <li><Link to={{ pathname: '/dashboard', query: { lang: 'fr' } }} activeClassName="active">Dashboard</Link></li> 
 
     </ul> 
 
     <div> 
 
     {this.props.children} 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
App.contextTypes = { 
 
    router: React.PropTypes.func.isRequired, 
 
}; 
 

 
ReactDOM.render(<Router history={ReactRouter.hashHistory}> 
 
    <Route path="/" component={App}> 
 
      <Route path="dashboard" component={Dashboard} onEnter={redirectBasedOnLang} /> 
 
      <Route path="dashboardfr" component={FrDashboard} /> 
 
    </Route> 
 
    </Router>, document.getElementById('test'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.0/ReactRouter.min.js"></script> 
 

 

 
<div id="test"></div>

let Router = ReactRouter.Router; 
 
let RouterContext = Router.RouterContext; 
 
let Route = ReactRouter.Route; 
 

 
const Link = (props) => { 
 
    return (
 
    <b className="lang" onClick={() => props.onClick(props.lang)}>{props.lang}</b> 
 
); 
 
} 
 
     
 
class App extends React.Component { 
 
    
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.handleLang = this.handleLang.bind(this); 
 
    this.state = { langs: [] }; 
 
    } 
 
    
 
    handleLang(lang) { 
 
    let langs = [].concat(this.state.langs); 
 
    if(langs.indexOf(lang) != -1) { 
 
     langs = langs.filter(item => item != lang); 
 
    } 
 
    else langs.push(lang); 
 
    
 
    this.setState({langs: langs}); 
 
    
 
    this.context.router.push({ 
 
     pathname: '/', 
 
     query: { langs: langs } 
 
    }); 
 
    } 
 
    
 
    render() { 
 

 
    return (
 
     <div> 
 
     <Link onClick={this.handleLang} lang={"fr "} /> 
 
     <Link onClick={this.handleLang} lang={"en "} /> 
 
     <Link onClick={this.handleLang} lang={"hi "} /> 
 
      
 
     <div> 
 
      <hr/> 
 
      <br/> 
 
      active languague : 
 
      <div>{this.props.location.query.langs ? [].concat(this.props.location.query.langs).join(',') : ''}</div> 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
App.contextTypes = { 
 
    router: React.PropTypes.func.isRequired, 
 
}; 
 

 
ReactDOM.render(<Router history={ReactRouter.hashHistory}> 
 
    <Route path="/" component={App} /> 
 
    </Router>, document.getElementById('test'));

.lang { 
 
    display: inline-block; 
 
    background: #d3d3d3; 
 
    padding: 10px; 
 
    margin: 0 3px; 
 
    cursor: pointer; 
 
    width : 50px; 
 
    border : 1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.0/ReactRouter.min.js"></script> 
 

 
<div id="test"></div>

來源

2017-02-22 15:24:34 WitVault

哇，非常全面的回答。我現在正在訪問'query'參數併成功處理它。謝謝：-） –

您可以訪問通過react-router傳遞給組件的location prop。你可以看到它有一個query property。這樣，您只需訪問this.props.location.query.lang即可獲得查詢字符串中的值。

您可以在react-router項目中檢查this example。

來源

2017-02-22 14:51:05 Lucas

鏈接到的例子是404 – superjisan

react router - 通過url參數傳遞道具

回答

相關問題