Reactjs Question posted in
The new location for the React Documentation can be found here.

How to show two tabs in reactjs

I have my normale app working fine .
But i want when i launch the app it launche two tabs
the first one opens with normal path ='/'
the seconde one opens with path='/board'
like this :

tab 1: http://localhost:5173/
tab 2: http://localhost:5173/board

I puted this in my App.tsx(where i put my routes):

 useEffect(() => {
    const newWindow = window.open('/board', '_blank');
    if (newWindow) {
      const htmlFilePath = '/board';
      fetch(htmlFilePath)
        .then((response) => response.text())
        .then((htmlContent) => {
          newWindow.document.open();
          newWindow.document.write(htmlContent);
          newWindow.document.close();
        })
        .catch((error) => {
          console.error('Error fetching HTML file:', error);
        });
    } else {
      console.error('Error opening new window');
    }
  }, []);

but it launch multipme tabs.
I tryed also this in my main.tsx:

 <Router>
    <Routes>
      {/* Normal Route */}
      <Route path="*" element={<App />} />

      {/* Route for '/board/' */}
      <Route path="/board" element={<Board />} />
    </Routes>
  </Router>

And it not works

Tags:

2

Answers


  1. 0 
    // App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Board from './Board';

const SecondTab: React.FC = () => {
  // Perform any necessary initialization or fetch data specific to the second tab
  return <Board />;
};

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        {/* Normal Route */}
        <Route path="/" element={<YourMainComponent />} />

        {/* Route for '/board/' */}
        <Route path="/board" element={<SecondTab />} />
      </Routes>
    </Router>
  );
};

export default App;

    Instead of using useEffect inside your main component (App.tsx), you can create a separate component for the second tab and use it as a child of your main App component.By doing this, the second tab content is now a separate component (SecondTab), and you can still open it in a new window as you were trying before.

    Login or Signup to reply.
  2. 0

    Your code for routing

     <Router>
    <Routes>
      {/* Normal Route */}
      <Route path="*" element={<App />} />

      {/* Route for '/board/' */}
      <Route path="/board" element={<Board />} />
    </Routes>
  </Router>

    If you do this, when go to /board, it will match both: "*", and "/board" show it render both and . And because it render , it trigger the useEffect and will open new tab => loop forever

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search