React Router - 單擊后刪除鏈接組件？

Question

使用 React Router 時，如何在單擊 Link 並完成路由時卸載/刪除 Link 組件所在的 div 或 Link 組件本身？

例如，我有一個結構如下的應用程序：

==Header==
==Link1 Link2==

當用戶被路由到Link1時， ==Link1 Link2== div 應該被卸載/刪除並替換為Link1的內容。 像這樣：

==Header==
==Content of Link1, with a "back" button links to home page==

當用戶單擊導航欄中的Link1時，我能夠呈現 Link1 的內容，並且我努力重組BrowserRouter 、 Route 、 div標簽，但結果仍然是這樣的：

==Header==
==Link1 Link2==
==Content of Link1, with a "back" button links to home page==

這是CodeSandbox上的代碼片段，我希望它能更好地說明我的問題。

代碼沙盒演示

Answer 1

看看這個CodeSandbox演示 。

我為/路線創建了一個新路線。 我僅在此路線中渲染<Navigations />組件。

這是您想要的效果嗎？

Answer 2

這是您可以執行此操作的方法； 您需要在 home 路由中定義 Link 組件。

function App() {
    return (
        <div className="App">
            <Switch>
                // The link will only be visible on the home route. `/`
                <Route exact path="/">
                    <Link to="/linkAddress">LINK TEXT</Link>
                </Route>
                <Route path="/linkAddress">
                    <Component />
                </Route>
            </Switch>
        </div>
    );
}