Search code examples
javascriptreactjsreact-router-dom

Link to another page from App page not working

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('App'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import './App.css'
import Release from './components/Release'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
  Link
} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <div>
            <Link to="/release">Release Notes</Link>
          </div>
          <Routes>
            <Route exact path="/release" element={<Release />}></Route>
          </Routes>
        </Router>
      </header>
    </div>
  );
}

export default App;

Release.js

import React from "react"

const Release = () => {
  return(
    <div>
      Release Notes - Goes here
    </div>
  )
}

export default Release

When I click the link "Release Notes" in app page, it is taking to Release page, however the link "Release Notes" is also showing as it is in App page.

This is what I am expecting > App page is having a link(Release), on click it should take to release page and display "Release notes -goes here" and should not show any other links again as it is in app page. But the release page is showing the link again "Release Notes" along with "Release Notes - Goes Here"

See pic

What I am doing wrong? I am just learning React js.

Solution

  • When I click the link "Release Notes" in app page, it is taking to Release page, however the link "Release Notes" is also showing as it is in App page.

    The code is unconditionally rendering the Link, irrespective of any routes.

    This is what I am expecting > App page is having a link(Release), on click it should take to release page and display "Release notes -goes here" and should not show any other links again as it is in app page.

    Render a Route on the home "/" path that simply renders the Link to the "/release" route.

    function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <Routes>
            <Route
              path="/"
              element={(
                <div>
                  <Link to="/release">Release Notes</Link>
                </div>
              )}
            />
            <Route path="/release" element={<Release />} />
          </Routes>
        </Router>
      </header>
    </div>
  );
}