I'm trying to redirect the js file using router in react js and bootstrap but unable to redirect

Question

/* 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;

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Nikolai Kiselev, Jun 13 '22 at 10:40
Where is the `Redirect` component being rendered? Why is it being invoked in the `setInterval`? Nothing in your code makes much sense React-wise. — Drew Reese, Jun 13 '22 at 21:46

User456 · Answer 1 · 2022-06-12T13:18:48.617

0

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.

edited Jun 12 '22 at 13:18

answered Jun 12 '22 at 12:50

User456

1,216
4
15

can you be more specific I'm new to react where should i add it before BrowserRouter tag? – tanmay thakur Jun 12 '22 at 12:54
That's how the function should look. You don't need BrowserRouter here. – User456 Jun 12 '22 at 12:56
function Redirect() { return( ); } like this? – tanmay thakur Jun 12 '22 at 13:05
The `to` attribute is a path. You don't need to pass a component but define a route for it. – User456 Jun 12 '22 at 13:10
my other file named secondary which I'm trying to open lies in the same folder. So, do I have to specify as /Secondary or something else? – tanmay thakur Jun 12 '22 at 13:13
That's not a path to your component file. It's a custom URL path you specified in the route. I edited the answer with the route created. – User456 Jun 12 '22 at 13:21

I'm trying to redirect the js file using router in react js and bootstrap but unable to redirect

1 Answers1