react-router-dom: 没有路由到任何 jsx 文件

Question

嗨，我是 React 开发的初学者。我正在尝试在 app.js 中导入 jsx 文件，但它没有在浏览器中提供任何预览。请看一下屏幕截图。从路由器输出的组件/jsx 文件完美地加载到这里。

enter image description here enter image description here

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import './App.css';
import Footer from './components/Footer';
import Dashboard from './page/Dashboard'
import Scanner from './page/Scanner'
import { BrowserRouter as Router, Routes,Route,} from "react-router-dom";

function App() {
  return (
    <div className="App">
       <Router>
        <Routes>
          <Route path="/" page={Dashboard}/>
          <Route exact path="/dashboard" component={Dashboard}/>
          <Route exact path="/scanner" component={Scanner}/>
        </Routes>
      </Router>
      <Footer></Footer>
    </div>
  );
}

export default App;

Answer 1

我看到您正在使用 react-router-dom: 6.3.0。 v6 不再支持 exact 你应该像这样更改你的代码

<Route path="/" element={<Dashboard />}/>
<Route path="/dashboard" element={<Dashboard />}/>
<Route path="/scanner" element={<Scanner />}/>

Answer 2

在最新的 React 版本中，您应该像这样更改代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import './App.css';
import Footer from './components/Footer';
import Dashboard from './page/Dashboard'
import Scanner from './page/Scanner'
import { BrowserRouter as Router, Routes,Route,} from "react-router-dom";

function App() {
  return (
    <div className="App">
       <Router>
        <Routes>
          <Route path="/" element={<Dashboard />}/>
          <Route exact path="/dashboard" element={<Dashboard />}/>
          <Route exact path="/scanner" element={<Scanner />} />
        </Routes>
      </Router>
      <Footer/>{/* you can also typr this footer component like this */}
    </div>
  );
}

export default App;

react-router-dom: 没有路由到任何 jsx 文件

react-router-dom: Not routing to any jsx file

reactjs

react-router