在反应中,我正在尝试使用 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>
当我 运行 在本地主机上反应应用程序时,它没有显示任何错误,但也没有渲染任何东西,当我尝试只使用导航栏组件时,它渲染了,但是当我添加 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>