我创建了组件
NotFound
,当我转到一个不存在的页面时它工作正常。但是同一个页面出现在我的所有页面中,而不仅仅是不存在的页面。这是组件:
import React from 'react'
const NotFound = () =>
<div>
<h3>404 page not found</h3>
<p>We are sorry but the page you are looking for does not exist.</p>
</div>
export default NotFound
这就是我在主页上使用它的方式:
class MainSite extends Component {
render () {
return (
<div>
{/* Render nav */}
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
{/* Dashboard page */}
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
{/* Retrospectives page */}
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
{/* Users page */}
<ProtectedRoute exact path='/users' component={UsersPage} />
{/* Projects page */}
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
{/* Retrospective related pages */}
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
<Route exact path='/join-retrospective' component={JoinRetrospective} />
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
{/* OnBoarding pages */}
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
<Route exact path='/auth-handler' component={AuthHandler} />
<Route exact path='/join-organization' component={JoinOrganization} />
</div>
)
}
}
export default MainSite
如您所见,我使用
<Route path="*" component={NotFound} />
创建 404 页面,但该组件也出现在每个现有页面中。我该如何解决这个问题?
试试这个:
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path='/dashboard' component={Nav} />
<Route path='/retrospectives' component={Nav} />
<Route path='/users' component={Nav} />
<Route path='/projects' component={Nav} />
<Route path="" component={NotFound} />
</Switch>
以下所有示例都可以正常工作:
<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path
或者如果你想返回一个没有任何组件的简单 404 消息:
<Route component={() => (<div>404 Not found </div>)} />
对于那些使用
react-router-dom
v6 寻找答案的人来说,很多事情都发生了变化。 Switch
例如不再存在,你必须使用 element
而不是 component
,......检查这个小例子让你有一个想法:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './index.css'
import App from './App'
const Test = () => (
<h1>404</h1>
)
ReactDOM.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/' element={<App />} />
<Route path='*' element={<Test />}/>
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
)
有了这个你就定义了你的
home
路线,所有其他路线将显示404。查看官方指南了解更多信息。
试试这个:
import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
class App extends React.Component {
render(){
return(
<BrowserRouter>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path="*" component={NotFoundPage} />
</Switch>
</BrowserRouter>
)
}
}
export default App;
<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>
只需从
Switch
导入 react-router-dom
并将所有路由包装在 Switch 组件中。同样重要的是要注意将您的 404Page 组件保持在最底部(就在您的 switch 结束标记之前)这样它会首先将每个组件与其路由匹配。如果匹配,它将渲染组件或检查下一个组件。最终,如果没有找到匹配的路由,它将呈现 404Page
react router 是新手们头疼的问题。使用此代码格式。这是类组件,但你可以制作一个功能组件并使用它。
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';
import Footer from './Footer';
class App extends React.Component {
render(){
return(
<Router>
<Routes>
<Route exact path='/' element={HomePage} />
<Route path="*" element={NotFoundPage} />
</Routes>
<Routes>
<Route path="/" element={Footer}/>
</Routes>
</Router>
)
}
}
export default App;
import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
function App() {
return (
<>
<Router>
<Routes>
<Route exact path='/home' element={<Home/>}/>
<Route exact path='/contact' element={<Contact/>}/>
<Route exact path='/about' element={<About/>}/>
<Route path="/404" element={<PageNotFound/>} />
<Route path="*" element={<Navigate to="/404" />} />
</Routes>
</Router>
</>
);
}
export default App;