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参数传递道具

回答

相关问题