Question

我在我的React项目中安装了react-router 4.0.0-alpha.4，这是我正在关注的教程，我很难理解它是如何被调用的StorePicker.jsx

App.jsx

import React from 'react'; 
import { render } from 'react-dom'; 
import './css/style.css'; 

import {BrowserRouter, Match, Miss} from 'react-router';

import StorePicker from './components/StorePicker';
import App from './components/App';
import NotFound from './components/NotFound';

const Root = () => {
    return(
        <BrowserRouter>
            <div>
                <Match exactly pattern="/" component={StorePicker}/>
                <Match pattern="/store/:storeId" component={App}/>
                <Miss component={NotFound}/>
            </div>
        </BrowserRouter>
    )
}

render(<Root/>, document.querySelector('#main'));

所以在StorePicker.jsx的最后，我在contextTypes对象上创建了一个StorePicker属性。然后我将值设置为{ router: React.PropTypes.object }。 React.PropTypes.object与路由器无关。

但goToStore(event) router突然this.context.router对象在router中可用。

这是从哪里来的？是因为我在contextTypes中使用单词React.PropTypes.object是一个特殊的关键字，而this.context以某种方式知道获取路由器对象并将其添加到context
为什么本教程甚至告诉我使用这种模式？根据React文档，应避免使用StorePicker.jsx：https://facebook.github.io/react/docs/context.html
有更好的方法吗？

import React from 'react'; import { getFunName } from '../helpers.js' class StorePicker extends React.Component{ goToStore(event){ event.preventDefault(); const storeId = "1234"; this.context.router.transitionTo(`/store/${storeId}`); } render(){ return ( <button onClick={(e) => this.goToStore(e)}>CLICK ME</button> ) } }; StorePicker.contextTypes = { router: React.PropTypes.object } export default StorePicker;

{{1}}

本教程中的代码有效，但我不知道为什么它有效。

Answer 1

3.有更好的方法吗？：

你不应该使用上下文。在表单提交时，您似乎只需要重定向到一个url（其值取决于文本框）。

在React中，您可以使用react routers。

以下是一些例子：StackOverflow: programmatically-navigate-using-react-router

或者在Javascript中，如果您只需要重定向到网址，则只需使用＆＃39; window.location＆＃39;功能如下：

goToStore(event) {
    event.preventDefault();
    const storeId = this.storeInput.value;
    window.location.assign(`/store/${storeId}`)
  }

但是，您可能不想使用第二个选项，因为Javascript呈现整个dom，然后没有使用React的优势。

如何在使用contextTypes时创建react-router？

1 个答案: