<Route> 不显示组件

Question

当我使用raent制作导航栏时，我遇到了问题，但是当我把<Route>组件使web视图空白时，但是如果我删除<Route>，有人可以帮助我解决我的问题吗?

这是我在App.js上的代码

import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
function App() {
return (
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link className="navbar-brand" to="/">Logo</Link>
<div className="navbar-nav">
<Link className="nav-item nav-link" to="/">Home</Link>
<Link className="nav-item nav-link" to="/premium">About Me</Link>
</div>
</nav>
</div>
<Route path="/" component={() => <h4>Home</h4>}></Route>
<Route path="/premium" component={() => <h4>About Me</h4>}></Route>
</Router>
);
}
export default App;

Answer 1

注意事项:

1. 路由需要是Routes
的直接子路由
2. child应该传递给elementprop，而不是component
3. elementprop期望一个React Node，而不是一个函数

import {
BrowserRouter as Router,
Route, 
Routes,
Link 
} from 'react-router-dom'

<Router>
<div>
<nav>
<Link to="/">Logo</Link>
<div>
<Link to="/">Home</Link>
<Link to="/premium">About Me</Link>
</div>
</nav>
</div>
<Routes>
<Route path="/" element={<h4>Home</h4>}></Route>
<Route path="/premium" element={<h4>About Me</h4>}></Route>
</Routes>
</Router>

删除className为可读性

Answer 2

基于OPs关于路由工作的评论，但路由内容未呈现，我将假设react-router-dom@6已安装并工作。Route组件API与v5相比有很大的变化。Route组件只能由Routes组件(RRDv5的Switch组件的精神继承者)呈现，或者在嵌套路由的情况下由另一个Route组件呈现。component,render和children功能道具消失了，取而代之的是单个element道具，使用ReactNode，也就是JSX。

• 将Route组件封装在Routes组件中
• 在Route组件的elementprop上渲染路由内容

例子:

import './App.css';
import {
BrowserRouter as Router,
Routes,  // <-- import Routes component
Route,
Link
} from 'react-router-dom';
function App() {
return (
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link className="navbar-brand" to="/">Logo</Link>
<div className="navbar-nav">
<Link className="nav-item nav-link" to="/">Home</Link>
<Link className="nav-item nav-link" to="/premium">About Me</Link>
</div>
</nav>
</div>
<Routes> // <-- wrap routes in `Routes` component
<Route
path="/"
element={<h4>Home</h4>} // <-- JSX on element prop
/>
<Route
path="/premium"
element={<h4>About Me</h4>} // <-- JSX on element prop
/>
</Routes>
</Router>
);
}
export default App;

Answer 3

创建导航栏不需要BrowserRouter或Route组件，从react-router-dom

所示的快速入门指南:reactrouter.com/QuickStart #导航

function Home() {
return (
<div>
<h1>Home</h1>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="about">About</Link>
</nav>
</div>
);
}

，导航条也应该作为一个Route的元素属性按照这个方法:

<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>