0

I have a landing page that scrolls to the relative header. I am trying to add my project documentation in the footer to open in a separate window and completely move away from the landing page. I have set up the router and routes but each time I click, the page just opens my documentation at the bottom of the Landing page and leaves everything else open. I would like this documentation page to open in a new window and move away from my landing page.

Any advice or help would be greatly appreciated.

Here is my app.jsx code

import {
  BrowserRouter,
  Routes,
  Route,
  Redirect,
} from "react-router-dom";



export const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 1000,
  speedAsDuration: true,
});

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  return (
    <BrowserRouter>
    <div>
      <Navigation />
      <Header data={landingPageData.Header} />
      <About data={landingPageData.About} />
      <Services data={landingPageData.Services} />
      <Meet data={landingPageData.Meet} />
      <Contact data={landingPageData.Contact} />
    </div>,
    
    <Routes>
    <Route exact path="/Documentation" target = {"_blank"} element={<Documentation />} /> 
    </Routes>
    </BrowserRouter>

  );
};

export default App;

and here is the documentation link in my footer component

          <MDBNavbarLink onClick={routeChange} 
          style={{
                  fontFamily: "Robot",
                  color: "black",
                  fontSize: "10px",
                  marginLeft: "-990px",
                  
                  }}>
                Documentation
              </MDBNavbarLink>
Slimtradeywestcoast
  • 3
  • 1

1 Answers1

0

It's depending on your react-router version but you should add the target blank on your link and not on the declaration of your route.

Here is a other topic talking about this : React-Router open Link in new tab

Hoping that can help you

jerome gallego
  • 124
  • 4