react-router-dom v6 在當前頁面上渲染新頁面

Question

問題如下。 在 app.js 中拼出了路由和主頁組件。 主頁包含一個導航站點的導航欄，只有當您 go 到任何頁面時，它才會繪制在主頁的頂部。 如果你切換到家本身，它就會被復制。 inte.net 上的文章沒有幫助，添加精確的路由路徑也沒有幫助。

function App() {
    return (
        <div className="messenger">

            <Routes>
                <Route path="/home/" element={<Home/>}/>
                <Route path="/settings/" element={<Settings/>}/>
                <Route path="/login/" element={<Login/>}/>
                <Route path="/register/" element={<Register/>}/>
            </Routes>

            <Home/>

        </div>
    )

家

export default class Home extends Component {
    render() {
        return (
            <div>
                <NavBar/>
                <ChatMenu/>
            </div>
        );
    }
}

如何在導航欄中編寫的示例

    export const NavBar = () => {
            return (<div className="navbar-cm">
        
                    <div className="nav_element">
                        <Link to="/home">
                            <img src={homeIMG} className="nav_element"/>
                        </Link>
                    </div>
and a few more similar ones
    </div>);
    };

Answer 1

從路由器中刪除<Home /> ：

function App() {
    return (
        <div className="messenger">

            <Routes>
                <Route path="/home/" element={<Home/>}/>
                <Route path="/settings/" element={<Settings/>}/>
                <Route path="/login/" element={<Login/>}/>
                <Route path="/register/" element={<Register/>}/>
            </Routes>
        </div>
    )

Answer 2

問題

您在路線之外再次渲染Home組件，這就是為什么它在渲染Home的"/home"路徑上時與所有路線一起渲染，包括兩次。

function App() {
  return (
    <div className="messenger">
      <Routes>
        <Route path="/home/" element={<Home />} />
        <Route path="/settings/" element={<Settings />} />
        <Route path="/login/" element={<Login />} />
        <Route path="/register/" element={<Register />} />
      </Routes>

      <Home /> // <-- always rendered below routed content
    </div>
  )
}

解決方案

移除在路由之外獨立存在的Home組件。

function App() {
  return (
    <div className="messenger">
      <Routes>
        <Route path="/home/" element={<Home />} /> // <-- now only Home component rendered
        <Route path="/settings/" element={<Settings />} />
        <Route path="/login/" element={<Login />} />
        <Route path="/register/" element={<Register />} />
      </Routes>
    </div>
  )
}