,javascript,reactjs,react-router,react-router-v4,react-router-dom"/>

首页 > 解决方案 > React Router 不渲染组件

问题描述

我有一个非常简单的例子,我确定我做错了什么,但我不能让我将用户导航回我的主页。当我在 / 上刷新页面时,它将呈现主页(这是一个 PostCollection),但是从其他组件导航回 / 的链接不起作用。它只是更新 url 栏中的 url,而不是加载其他组件。

示例代码,为简洁起见截断:

const App:React.SFC = () => {
    return (
        <Provider store={store}>
            <Router basename={ROUTE_ROOT}>
                <>
                    <Header/>
                    <MainContainer>
                        <Switch>
                            <Route path='/' exact component={PostCollection}/>
                            <Route path='/page/:page' exact component={PostCollection}/>
                            <Route path='/:year/:month/:day/:post' exact component={Post}/>
                        </Switch>
                    </MainContainer>
                    <Footer/>
                </>
            </Router>
        </Provider>
    );
};

export default App;

然后在我的 Header 组件中,如我的主应用程序所示:

const Header:React.SFC = () => {
    return (
        <header className="flex">
            <Link to='/'>
                Go Home
            </Link>
        </header>
    );
};

export default memo( Header );

这里的简单仅将 url 更新到我的根目录,但不会使用我的 PostCollection 组件重新呈现。谁能看到我做错了什么?

标签: javascriptreactjsreact-routerreact-router-v4react-router-dom

解决方案


推荐阅读