React-Router：如何使用一条路由在页面的不同部分呈现不同的组件

Question

我的侧边栏中有2个链接，这会将链接更改为＆＃34;收件箱＆＃34;和＆＃34;联系人＆＃34;我的问题是，当路线改变时，侧边栏的内容不会改变，我需要重新加载页面以呈现它的内容。

侧边栏上的链接会附加一个ID，它可以完美呈现，例如，路径中具有该ID的联系人。

class App extends Component {
    render() {
        return (
            <Router>
            <div>
                <SidebarContainer/>

                <Route exact path="/inbox/:id" component={MessageContainer}/>
                <Route  path="/contacts" component={ContactContainer}/>
                <Route  path="/test" component={Test}/>

            </div>
        </Router>
    )
}
}

这是我在组件中尝试的内容

render() {
    return (
        <div>
                <li className="padded-left">
                    <div>
                        <Link onClick={this._showInbox} to="/inbox" className="waves-effect waves-teal btn-flat">
                            <i className="material-icons">chat</i>
                        </Link>

                        <Link onClick={this._showContacts} to="/contacts" className="waves-effect waves-teal btn-flat">
                            <i className="material-icons">contacts</i>
                        </Link>
                    </div>

                </li>

                <li>
                    <Link to="/test" className="waves-effect waves-teal btn-flat">
                        <i className="material-icons">Test</i>
                    </Link>
                </li>

                <li>
                    <div className="divider">_</div>
                </li>

                <Route path="/inbox" component={ConversationContainer}/>
                <Route path="/contacts" component={ContactsContainer}/>
            </ul>



        </div>
    );
}

Answer 1

在这种情况下，我不会在路由器内呈现SideBarContainer。你必须考虑到，当你导航时，唯一会被触发的东西就是Route里面的组件。除非您刷新页面，否则补充工具栏将始终保持不变（此处，触发整个App再次渲染）

由于您期望在给定特定路线的情况下更改SideBar，您应该在<Route />的组件内进行渲染。