如何在 react js 中转到（导航）下一页

Question

I have a page called Home.js which has a button,so when it is clicked it should take me to another page called Land.js but it display the content of both of the pages in similar page ..how to redirect to Land.js without displaying the content of the Home.js??

this is my app.js

import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import Land from "./components/Land";
function App() {
  return (

    <BrowserRouter>
      <div className="App">
        <Home />
        <Route path="/Land" component={Land} />
      </div>

    </BrowserRouter>



  );
}

export default App;

Home.js

import React from 'react'
import './start.css'
import { Link } from "react-router-dom"


function Home() {

    return (

        <div className="content">
            <h2>MusicQ</h2>
            <h2>MusicQ</h2>
            <Link to="/Land" className="button">Submit</Link>


        </div>

    )
}
export default Home

Land.js

import React from 'react'

const Land = () => {
    const txt = {
        color: 'black'
    }
    return (
        <div>
            <h1 style={txt}>hello how are you</h1>
        </div>
    )
}

export default Land

so how can we redirect to the next page and display the content to next page?? can u please help me to figure this out

Thank you in advance

Answer 1

While React Routers can be used to navigate between components, you could of course also replace the whole screen to make it look like it navigated to a different page.

You need to route your root path to Home, so something like this should do it -

import { BrowserRouter, Route } from "react-router-dom";
import { Link, Switch } from "react-router-dom"

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/" >Home</Link>
        <br></br>
        <Link to="/Land">Land</Link>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/Land" component={Land} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

const Home = () => {
  return (
    <div>
      <h2>Home Page</h2>
    </div>
  )
}

const Land = () => {
  return (
    <div>
      <h2>Land Page</h2>
    </div>
  )
}

export default App;

Note : Notice we need to use the exact path, to avoid conflict as / will be a part of every other path.

Do also understand that the page does not ever refresh, but the React Router updates the URL as you navigate across the site (as described in the React Router Example Docs ). The reason for this is that it preserves the browser history while making sure features such as the back button may work properly.

Answer 2

You need to add Home in a Route :

<Route path="/" component={Home} />
<Route path="/Land" component={Land} />

Answer 3

Under the BrowserRouter put references to all pages. then use Link to navigate to any of the page which are referenced in the Route

/** Make a reference to all the pages **/
    <BrowserRouter>
      <div className="App">
         <Route path="/" component={Home} exact />
        <Route path="/Land" component={Land} />
      </div>
    </BrowserRouter>
    
/** Use Link to navigate anywhere within the page **/
    <Link to="/Land" className="button">go to land</Link>
    <Link to="/Home" className="button">got to Home</Link>

For better understanding refer the React-router Docs

Answer 4

while using react router you need to add all pages in route including home page.if you not adding home into Route then home is act like a parent class after you called anything that also displayed with home page.this problem is you faced now. Also use exact in home route to avoid some similar path issues.

 <Route path="/" exact> <Home/> </Route> <Route path="/Land"> <Land/> </Route>