реагировать маршрутизатор - передать реквизит по аргументам URL

Question

Я разрабатываю многоязычное и многовалютное приложение, которое использует react-router, react-router-redux & react-router-bootstrap для маршрутизации.

пользователи

В настоящее время прибывают в приложение с языком по умолчанию и валюту, однако я хотел бы быть в состоянии предоставить некоторые аргументы в URL, чтобы установить либо язык или валюту - что-то вдоль линий http://myapp.com/page1?lang='fr'

I Также хотелось бы иметь возможность использовать эти аргументы на любой странице, чтобы:

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

Вы можете получить доступ к location пропуску, переданному react-router. Вы можете видеть, что у него есть query property. Таким образом, вы можете просто получить доступ к this.props.location.query.lang, и вы получите значение, которое находится в строке запроса.

Вы можете проверить this example в проекте реактивного маршрутизатора.