如何将 state/object 传递给子路由（react-router redux）？

Question

我的 'store.js' 执行以下操作：

export default function configureStore(initialState = {todos: [], floatBar: {} }) {
 return finalCreateStore(rootReducer, initialState)
}

然后在我的 'client.js' 中，我有初始化状态，但没有定义 'todos' 数组，并设置路由器：

let initialState = {
  floatBar: {
    barStatus: false,
    id: 0
  }
}

let store = configureStore(initialState)

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          path="/"
          component={App}
        >
        <Route
          component={FirstPage}
          path="firstpage"
        />
        <Route
          component={NewPage}
          path="/newpage/:id"
        />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

然后在我的 'item.js' 组件中，它是 'FirstPage.js' 的子组件，它获取一个对象 'todo' 并检索“.id”，这是来自 'todos' 对象数组（在 render() return{} 内部），我有以下内容：

<Link to={`/newpage/${this.props.todo.id}`}>Link1</Link>

最后，在我新链接的页面 'NewPage.js' 中，我希望能够在 'item.js' 中使用完全相同的 'todo' 对象，因此我可以调用 'todo.id' 之类的。我该怎么做？

任何人都可以展示使用 redux react-router 执行此操作的正确方法吗？真的很感激。

**更新

**行动的最新更新

actions.js 里面有我所有的动作创作者：

import * as actions from '../redux/actions'

class NewPage extends Component{
  handleCommentChange(){
    this.props.actions.updateComment()
  }

  render(){
    return()
  }
}

function mapDispatchToProps(dispatch){
  return{
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapDispatchToProps
)(NewPage);

Answer 1

您可以从 props.params.id 访问 "todo id"。您也可以通过 "mapStateToProps"

中的 "ownProps" 访问 NewPage 的 props.params

import {connect} from "react-redux";
import React, { Component } from 'react'
import { Divider } from 'material-ui'

const styles = {
  title:{
    color: 'white',
    textAlign: 'left',
    marginLeft: 30
  }
}

class NewPage extends Component{
  render(){
    return(
      <div>
        &nbsp;
        <div style={styles.title}>
          <font size="4">
            {this.props.todo.title}
          </font>
        </div>
        &nbsp;
          <Divider style={{backgroundColor:'#282828'}}/>
        &nbsp;
        <p style={{color: 'white'}}>{this.props.todo.detail}</p>
      </div>
    )
  }
}
const mapStateToProps=(state, ownProps)=>{
let todo = state.todos.filter(todo=>todo.id==ownProps.params.id);
return{
    todo:todo[0]
}};
export default connect(mapStateToProps)(NewPage);

Answer 2

另一种对动态道具特别有用的方法是克隆被注入的子组件 React Router 的 props，这让你有机会在此过程中传递额外的 props。示例

class Repos extends Component {
constructor(){...}
componentDidMount(){...}
render() {
let repos = this.state.repositories.map((repo) => (
<li key={repo.id}>
<Link to={"/repos/details/"+repo.name}>{repo.name}</Link>
</li>
));
let child = this.props.children && React.cloneElement(this.props.children,
{ repositories: this.state.repositories }
);
return (
<div>
<h1>Github Repos</h1>
<ul>
{repos}
</ul>
{child}
</div>
);
}
}
              
////////////////////////////
class RepoDetails extends Component {
renderRepository() {
let repository = this.props.repositories.find((repo)=>repo.name === this.props.params.
repo_name);
let stars = [];
for (var i = 0; i < repository.stargazers_count; i++) {
stars.push('');
}
return(
<div>
<h2>{repository.name}</h2>
<p>{repository.description}</p>
<span>{stars}</span>
</div>
);
}
render() {
if(this.props.repositories.length > 0 ){
return this.renderRepository();
} else {
return <h4>Loading...</h4>;
}
}
}

如何将 state/object 传递给子路由（react-router redux）？

How can I pass state/object to subroutes (react-router redux)?

javascript

reactjs

react-jsx

react-router

redux