开发者问题收集

React Router-通过 URL 参数传递 props

2017-02-22
5132
reactjs routes react-router react-router-redux

我正在开发一个多语言和多货币的应用程序，它使用 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 的文档中找不到有关此内容的任何明确信息，但我确信这是可能的。有人能给我指出正确的方向吗？

2个回答

您可以通过 this.props.location.query.langs 从组件内部访问查询参数， @Lucas 也提到了这一点。

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

除此之外，在您的场景中，我建议您查看 React Router 中可用的 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>
WitVault
2017-02-22

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

您可以在 react-router 项目中查看 此示例 。

Lucas
2017-02-22