react-router-dom v6 在当前页面上渲染新页面

Question

问题如下。在 app.js 中拼出了 Routes 和 home 组件。主页包含一个导航站点的导航栏，只有当您转到任何页面时，它才会绘制在主页的顶部。如果你切换到家本身，它就会被复制。互联网上的文章没有帮助，在路由路径中添加 exact 也没有帮助。

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>
  )
}

react-router-dom v6 在当前页面上渲染新页面

react-router-dom v6 rendering new page over current page

javascript

reactjs

react-router-dom

问题

解决方案