如何在index.js中正确路由？

Question

我正在使用 React (MERN) 创建一个博客项目，渲染时会发生这种情况：

我在index.js上的代码是这样的：

import React from 'react';
import  ReactDOM from 'react-dom';
import { HashRouter, Route } from 'react-router-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

import Signin from './components/Signin';
import Signup from './components/Signup';
import Home from './components/Home';
import HeaderApp from './components/HeaderApp';

ReactDOM.render(<HeaderApp/>,document.getElementById('header'));
ReactDOM.render(
<HashRouter>
    <div>
      <Route exact path='/' Component={Signin}/>
    </div>
</HashRouter>, document.getElementById('root'))

reportWebVitals();

另请注意，我使用两个元素在 index.html 文件中显示，因此有两个渲染：

Answer 1

你错过了

<Routes>

示例：

function App() {
  return (
    <HashRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /#/app/ */}
      </Routes>
    </HashRouter>
  );
}

您的代码应该是：

<HashRouter>
    <div>
     <Routes>
       <Route exact path='/' Component={Signin}/>
     </Routes>  
    </div>
</HashRouter>