在ReactJS中使用路由器和状态时将数据从一个页面传递到另一个页面

我是新手。我试图弄清楚如何在使用路由器时将数据从一个页面传递到另一个页面。当我点击添加用户按钮时，我想添加用户并导航回主页

我在网上搜索过，找到了使用道具将数据从父母传递给孩子的例子。但这里我用的是路由器。我怎样才能找到这样做的方法

index.js

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Home}>
            <IndexRoute component={AllUsers}/>
        </Route>
        <Route path="/add" component={Add}/>
    </Router>
    , document.getElementById('root'));

ReactDOM.render(
，document.getElementById（'root'）；

Home.js：

class Home extends Component {
    render() {
        return (
            <div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/add">Add</Link></li>
                    </ul>
                </nav>
                <div>
                    {this.props.children}
                </div>
            </div>

        );
    }
}

class Home扩展组件{
render（）{
返回(

家
加

{this.props.children}
);
}
}

AllUsers.js

class AllUsers extends Component {

    constructor(props) {
        super(props);
        this.state = {
            headingsData: ["Name"],
            rowsData: []
        }
    }

    componentDidMount() {
        this.setState({
            rowsData: [{name: "Alex"}, {name: "Jack"}]
        })
    }

    render() {
        return (
            <div className="allUsersContainter">
                <h2>All users</h2>
                <table border="1" className="tableComp">
                    <Headings headings={this.state.headingsData}/>
                    <tbody>
                    <Rows rows={this.state.rowsData}/>
                    </tbody>
                </table>
            </div>

        );
    }
}


class Headings extends Component {
    render() {
        let headings = this.props.headings.map((heading, i) => {
            return (<th>{heading}</th>);
        });
        return (<thead><tr>{headings}</tr></thead>);
    }

}

class Rows extends Component {
    render() {
        let rows = this.props.rows.map((row, i) => {
            return (<tr key={i}><td>{row.name}</td></tr>);

        });
        return (<tbody>{rows}</tbody>);
    }
}

export default AllUsers;

class AllUsers扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题数据：[“名称”]，
rowsData:[]
}
}
componentDidMount（）{
这是我的国家({
rowsData:[{姓名：“亚历克斯”}，{姓名：“杰克”}]
})
}
render（）{
返回(
所有用户
);
}
}
类标题扩展了组件{
render（）{
让headings=this.props.headings.map（（heading，i）=>{
返回（{heading}）；
});
返回（{headers}）；
}
}
类行扩展组件{
render（）{
让rows=this.props.rows.map（（row，i）=>{
返回（{row.name}）；
});
返回（{rows}）；
}
}
导出默认诱惑；

Add.js

class Add extends Component {
    render() {
        return (
            <form>
                <label>First Name:</label><input placeholder="Name" ref="name" required/><br/>
                <button type="submit">Add user</button>
            </form>
        );
    }
}

export default Add;

类添加扩展组件{
render（）{
返回(
名字：

添加用户
);
}
}
导出默认添加；

与另一个（非子）组件共享组件状态是一个常见问题

在这种情况下，一个好的解决方案是使用状态管理库。检查或，因为它们在React应用程序中非常常见

将这些库与React应用程序一起使用的主要好处是易于状态共享。这对您来说是最重要的，因为您不仅可以将您的状态作为

道具与子组件共享，而且几乎可以与应用程序中的每个组件共享

为了便于理解，您可以将状态管理库想象为应用程序的全局状态，您几乎可以从每个组件对其进行修改并订阅其更改。
您是否尝试过使用
this.props.history.push（'/home'）
一旦成功添加了user@AAqib，不，我没试过。但在此之前，如何将数据从Add组件传输到AllUsers组件。我知道，单击add按钮时，我必须编写一个函数来保存数据。但在这里，我认为不可能设置AllUsers组件中存在的状态数据，因为它不是父组件。请告知如何修复此问题或任何解决方法您是否尝试过使用此问题@SlawaEremkin：上面的文件被拆分，每个文件都有一个标题，使它们更易于阅读。请不要在编辑中把它们合并在一起——这显然很难阅读。看起来您也更改了一些代码，至少从编辑历史记录来看是这样的：我可以问一下您为什么这样做吗？谢谢。我希望在不使用Redux/Mobx/Store或context的情况下实现它。只有纯粹的反应。有可能吗。我能够使用添加将状态数据发送到路由器。在add中，我可以使用history.push重定向。但是，如何将更新后的数据发送回主页，以便在单击主页时显示新添加的数据？