在反应中,我正在尝试使用 browserrouter 和路由来呈现页面,但它不会呈现任何仅显示空白屏幕的内容,这是我的代码

In react i am trying to render pages Using browserrouter and route but it does not render anything showing only blank screen here is my code

当我 运行 在本地主机上反应应用程序时,它没有显示任何错误,但也没有渲染任何东西,当我尝试只使用导航栏组件时,它渲染了,但是当我添加 browserrouter 时,它没有显示任何我尝试过的东西路径方法也

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

import './App.css';
import Navbars from './components/Navbar';

import Login from './components/screens/Login.jsx';
import Signup from './components/screens/Signup.jsx';

import Home from './components/screens/Home'
import Profile from './components/screens/Profile';




function App() {
  return (
    <div>
      <BrowserRouter>

        <Navbars />
        <Route path="/">
          <Home />
            </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/signup">
          <Signup />
        </Route>

      </BrowserRouter>
    </div>
  );
}

export default App;

您必须为每个路由指定要渲染的组件的组件道具。

你也必须像这样包装你的路线。

也导入路由器和交换机。


<Router history={history}>
  <Switch>
    <Route component={Register} exact path="/register"/>
    <Route component={Home} exact path="/" />
  </Switch>
</Router>

您必须将路由包装在 <Routes></Routes> 组件中。同样对于 react-router-dom V17,你必须使用 element 道具而不是像这样的 component

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />}></Route>
      // ... here your other routes
    </Routes>
  </BrowserRouter>