Question

我正在开发一种使用react-router，react-router-redux＆amp;的多语种和多币种应用。 react-router-bootstrap用于路由。

目前，用户使用默认语言和货币到达应用程序但是我希望能够在网址中提供一些参数来设置语言或货币 - 这类似http://myapp.com/page1?lang='fr'

我也希望能够在任何页面上使用这些参数，以便：

http://myapp.com/page1?lang='fr'和http://myapp.com/page2/example1/test?lang='ru'的处理方式相同。基本上我希望路由器检查传递给它的任何url中是否存在这些参数，如果它们存在则执行一个函数。

我在react-router的文档中找不到关于此的任何明确信息，但我确信这是可能的。有人能指出我正确的方向吗？

Answer 1

您可以访问react-router传递给组件的location道具。您可以看到它有一个query property。通过这种方式，您只需访问this.props.location.query.lang即可获得查询字符串中的值。

您可以在react-router项目中查看this example。

Answer 2

您可以通过访问查询参数来自 @Lucas 。

提及的组件内部的this.props.location.query.langs

我提供了一个更好理解的实例。

除此之外在我的场景中，我建议你研究一下反应路由器中可用的onEnter挂钩。

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

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'));

＆＃13;

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

＆＃13;

<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>

＆＃13;

反应路由器 - 通过url参数传递道具

2 个答案: