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

Question

我正在开发一个使用react-router、react-router-redux 和react-router-bootstrap 进行路由的多语言和多币种应用程序。

目前用户使用默认语言和货币到达应用程序，但是我希望能够在 url 中提供一些参数来设置语言或货币 - 类似于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

您可以通过以下方式访问查询参数 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>

Answer 2

您可以访问由react-router 传递给组件的location 属性。你可以看到它有一个query property。通过这种方式，您可以简单地访问this.props.location.query.lang，您将获得查询字符串中的值。

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