Question

我有一个简单的路由器配置：

<Router history={browserHistory}>
    <Route lang="en" path="en" component={App}>
        <Route path="*" component={PageFactory} />
    </Route>
    <Redirect from="*" to="/en/*" />
</Router>

并且主App组件具有以下内容：

<div className="app">
    <Home />
    <Sidebar {...sidebarProps}>
        {this.props.children}
    </Sidebar>
</div>

因此，当您打开react应用程序时，Home组件始终打开。当我单击主页组件中的链接（例如/ en / pages / about-page）时，页面内容将加载到侧栏组件，侧栏会获得道具isOpen（这就是...sidebarProps的内容）。一切正常。当我单击链接边栏打开时，内容显示覆盖等。但是，过渡不会动画。这是我的CSS：

.sidebar {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 200;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.8);
    overflow: scroll;
    @include transition(visibility 0s linear 0.3s);
    &.is-open {
        visibility: visible;
        @include transition-delay(0s);
        .sidebar-content {
            @include transform(translateX(0));
        }
    }
}

补充工具栏中的isOpen道具将类is-open添加到补充工具栏组件的根元素。这是Sidebar组件供参考：

const Sidebar = props =>
    <aside className={`sidebar ${props.isOpen ? ' is-open' : ''}`}>
        <SidebarContent>{props.children}</SidebarContent>
    </aside>
;

为了测试它是否是React问题，我在我的App组件中添加了如下按钮：

constructor(props) {
    super(props);
    this.enableSidebar = this.enableSidebar.bind(this);
    this.state = { isOpen: false };
}

enableSidebar() {
    this.setState({ isOpen: true });
}

render() {
    const sidebarProps = { isOpen: this.state.isOpen };
    return (
        <div className="app">
            <button onClick={this.enableSidebar}>Enable Sidebar</button>
            <Home />
            <Sidebar {...sidebarProps}>{this.props.children></Sidebar>
        </div>
    );
}

当我点击按钮时，侧边栏会顺利打开。 React Router完全在每个请求上重新加载页面，使每个页面都成为静态页面而不是创建动态应用程序。

如何更改此行为？如何让React Router在路由更改时不重新加载所有组件？我在想，也许我的结构有问题。如果你也认为是，你能给我一个解决方案吗？

Answer 1

我发现了这个问题。我不得不使用React Router Link组件而不是HTML anchor元素。所以不要使用：

<a href="/en/pages/about-page">About</a>

我必须使用：

<Link to="/en/pages/about-page">About</Link>

React Router如何设置父元素的转换

1 个答案: