Question

这是文档中的一个示例 - nextState来自何处？

<Route path="courses/:courseId" getComponents={(nextState, cb) => {
  // do asynchronous stuff to find the components
  cb(null, {sidebar: CourseSidebar, content: Course})
}} />

Answer 1

nextState由路由器基础设施提供，包含有关您要前往的路线，参数和位置的信息。这允许您根据此信息加载组件或传递自定义属性或使用此信息执行任何操作。

仅用于演示的简单示例

const { Router, Route, Link, hashHistory, Redirect } = ReactRouter

const App = props => (
  <div>
    I came from {`${props.from || ' nowhere'}`}
    <Link to={{pathname: '/', query: {from: 1}}}>State 1 </Link>
    <Link to={{pathname: '/', query: {from: 2}}}>State 2 </Link>
  </div>
)

const getComponent = (nextState, next) => {
  next(null, props => <App {...props} from={nextState.location.query.from} />)
}

const Root = () => (
  <Router history={hashHistory}>
    <Route path="/" exact getComponent={getComponent}/>
    <Redirect from="/js" to="/" />
  </Router>
)

ReactDOM.render(
  <Root/>,
  document.querySelector('#app')
)

<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-router@3.0.5/umd/ReactRouter.js"></script>


<div id="app">Loading</div>

Answer 2

这里的下一个状态是当前状态或初始状态，在某些情况下，nextState指的是未应用于视图的状态。所以nextState将是最新状态。

例如，您在状态中将10设置为var_x，之前为5。

在这种情况下，如果你检查nextState.var_x它将是10而this.state.var_x将是5，经过一段时间后，只有this.state.var_x会更新，值将是10。

React Router中的nextStater getComponents是什么，它来自哪里？

2 个答案: