我试图使用React JS和Bootstrap中的路由器重定向JS文件，但无法重定向

Question

/*这是针对我的投资组合，我想在简短视频之后重定向到主页*/

//根据需要导入软件包

        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'
    

//创建可以重定向的功能

        function Redirect() {
          return(
            <>
              <BrowserRouter>
                <Routes>
                  <>
                    <Route path = '/' element = {<Secondary />}></Route>
                  </>
                </Routes>
              </BrowserRouter>
            </>
          );
        }
    

//将间隔设置为重定向

        setInterval(() => {
          Redirect()
        }, 5000);
        

// Main Code

        function App() {
          return(
            <div>
              <center>
                <video src={Vid} autoPlay muted id='myVid'></video>
              </center>
            </div> 
          )
        }
       

//代码结束

        export default App;

Answer 1

路由组件不会重定向。您需要导入并返回导航组件。

导入：

import { Navigate } from 'react-router-dom'

重定向函数：

function Redirect() {
    return <Navigate to="/" />;
}

如果没有（应用程序组件中的某个地方），您还需要为路径创建路由。

function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Secondary />} />
        </Routes>
      </BrowserRouter>
    );
}

注意：如果您使用的是React-Router-Dom V5，则需要使用其重定向组件而不是navigate。