我的主页总是呈现在所有其他页面之上，就像我在登录时一样，我的主页数据首先呈现为单页中的 2 页

Posted 2023-02-22

技术标签:

【中文标题】我的主页总是呈现在所有其他页面之上，就像我在登录时一样，我的主页数据首先呈现为单页中的 2 页【英文标题】：My home page is always rendering above every other page ,like when i am on signin my home page data is rendered first like 2 pages in single page 【发布时间】：2021-07-16 08:36:31 【问题描述】：

我的 App.js

import React from "react";
import  BrowserRouter, Route  from "react-router-dom";

import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";

function App() 
  return (
    <BrowserRouter>
      <Navbar />
      <Route path="/">
        <Home />
      </Route>
      <Route path="/Signin">
        <Signin />
      </Route>
      <Route path="/Signup">
        <Signup />
      </Route>
      <Route path="/Profile">
        <Profile />
      </Route>
      <Route path="/create">
        <CreatePost />
      </Route>
    </BrowserRouter>
  );


export default App;

我的导航栏包含所有页面的链接并且正在使用 react-router-dom 但我的主页总是呈现在每个页面上方，它包含 4 个其他页面链接，包括主页，我刚刚显示主页和注册，因为错误是其他页面也一样

我的 Navbar.js

import React from "react";
import PeopleIcon from "@material-ui/icons/People";
import IconButton from "@material-ui/core/IconButton";
import  Link  from "react-router-dom";

import "../ComponentsCss/Navbar.css";

function Navbar() 
  return (
    <div>
      <nav>
        <div className="nav-wrapper white">
          <Link to="/" className="brand-logo">
            Instagram
          </Link>
          <ul id="nav-mobile" className="right hide-on-med-and-down">
            <li>
              <Link to="/Signin">Signin</Link>
            </li>
            <li>
              <Link to="/Signup">Signup</Link>
            </li>
            <li>
              <Link to="/Profile">Profile</Link>
            </li>
            <li>
              <Link to="/create">create</Link>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );


export default Navbar;

Home.js

import React from "react";

import "../../ComponentsCss/Home.css";
function Home() 
  return (
    <div className="home">
      <div className="card home-card">
        <h5>Ramesh</h5>
        <div className="card-image">
          <img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
        </div>
        <div className="card-content">
          <i className="material-icons" style= color: "red" >
            favorite
          </i>
          <h6>TItle</h6>
          <p>this is amazing post</p>
          <input type="text" placeholder="add a comment" />
        </div>
      </div>
    </div>
  );


export default Home;

Signup.js

import React from "react";
import  Link  from "react-router-dom";

import "../../ComponentsCss/Login.css";

function Signup() 
  return (
    <div className="my-card">
      <div className="card auth-card input-field">
        <h2>Instagram</h2>
        <input type="text" placeholder="name" />
        <input type="email" placeholder="email" />
        <input type="password" placeholder="password" />
        <button
          className="btn waves-effect waves-light "
          type="submit"
          name="action"
        >
          Signup
        </button>
        <h5>
          <Link to="/signin">Already have account?</Link>
        </h5>
      </div>
    </div>
  );


export default Signup;

完整的github代码-：https://github.com/dhruv354/instagram-frontend.git

【问题讨论】：

【参考方案1】：

你需要让你的 Home 路由只匹配 exact 路由，用这个改变你的应用程序：

import React from "react";
import  BrowserRouter, Route  from "react-router-dom";

import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";

function App() 
  return (
    <BrowserRouter>
      <Navbar />
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/Signin">
        <Signin />
      </Route>
      <Route path="/Signup">
        <Signup />
      </Route>
      <Route path="/Profile">
        <Profile />
      </Route>
      <Route path="/create">
        <CreatePost />
      </Route>
    </BrowserRouter>
  );


export default App;

【讨论】：

【参考方案2】：

问题

默认情况下，Routers 包含匹配路由。换句话说，所有具有匹配路径的路由都将被匹配和渲染。将 path 属性视为路径前缀，path="/" 是每个路径的前缀，因此它始终会被匹配和渲染。

解决方案

使用Switch 组件独占只渲染一个匹配的Route 组件，并对路由进行排序，以便更具体的路径 ("/profile") 可以匹配之前不太具体的路径（"/"）。您的主路径“/”通常是最后一条路线，因为它是最不具体的。

import  BrowserRouter as Router, Switch, Route  from "react-router-dom";

function App() 
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/Signin">
          <Signin />
        </Route>
        <Route path="/Signup">
          <Signup />
        </Route>
        <Route path="/Profile">
          <Profile />
        </Route>
        <Route path="/create">
          <CreatePost />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );