In reactjs how can I open only a login page in a same tab...(a whole diffrent page but same tab)?

Question

In Layout.jsx

<Link to="/about">
    <button>About</button>
</Link>
<Link to="/login">
    <button>Login</button>
</Link>

In App.jsx

import About from './about';
import Layout from './Layout'
import Login from './login';
<Layout />
<Routes>
   <Route path='/about' element={<About />}/>
   <Route exact path='/login' element={<Login />} />
</Routes>

In index.js

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

when i click in login button it opens under the buttons...! instead i want to open a new page in same tab...

Answer 1

Since you are rendering the Layout component without any conditions in App.jsx it will always be rendered. If you want to load it only on the initial load you can create a new route called /home and add the buttons there. They layout component should ideally be used to hold components that will be required in multiple screens like the navbar or sidebar.

Code Sandbox : https://codesandbox.io/s/fervent-star-k708p4?file=/src/About.jsx

Answer 2

Your question bit confusing. If you want to open the login page on the same tab , after Link is clicked try <Link to="/login"> Login </Link> . If you want to render only login page without Link is clicked try conditional rendering .