/* this is for my portfolio i want to redirect to main page after a short video*/
//importing packages as required
import './App.css';
import React from 'react';
import Vid from './assets/codingmonkeyvid.mp4'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Secondary from './Secondary'
// creating function to which it can redirect
function Redirect() {
return(
<>
<BrowserRouter>
<Routes>
<>
<Route path = '/' element = {<Secondary />}></Route>
</>
</Routes>
</BrowserRouter>
</>
);
}
//setting interval to redirect
setInterval(() => {
Redirect()
}, 5000);
//maincode
function App() {
return(
<div>
<center>
<video src={Vid} autoPlay muted id='myVid'></video>
</center>
</div>
)
}
//end of code
export default App;
The Route component does not redirect. You need to import and return the Navigate component.
Importing:
import { Navigate } from 'react-router-dom'
The redirect function:
function Redirect() {
return <Navigate to="/" />;
}
You also need to create a route for the path if you didn't (somewhere in the App component).
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Secondary />} />
</Routes>
</BrowserRouter>
);
}
Note: if you are using react-router-dom v5, you will need to use its Redirect component instead of Navigate.