reactjs 404页面

n7taea2i  于 2023-04-20  发布在  React
关注(0)|答案(7)|浏览(112)

我创建了组件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页面,但是该组件也出现在每个现有页面中。我该如何解决这个问题?

vhmi4jdf

vhmi4jdf1#

试试这个:

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>
jhdbpxl9

jhdbpxl92#

下面的例子都很好:

<Route path="" component={NotFound} /> // empty ""
<Route path="*" component={NotFound} /> // star *
<Route component={NotFound} /> // without path

或者如果你想返回一个简单的404消息,不带任何组件:

<Route component={() => (<div>404 Not found </div>)} />
dwbf0jvd

dwbf0jvd3#

对于那些正在使用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。查看official guide以获取更多信息。

5us2dqdw

5us2dqdw4#

试试这个:

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>
eivnm1vs

eivnm1vs5#

只需从react-router-dom导入Switch,并将所有路由 Package 在交换机组件中。(就在你的switch结束标签之前)这样它会首先将每个组件与其路由进行匹配。如果匹配,它会渲染该组件,否则检查下一个。最终如果没有找到匹配的路由,它将呈现404Page

vwoqyblh

vwoqyblh6#

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;
lnvxswe2

lnvxswe27#

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;

相关问题