路徑無效時重定向到錯誤頁面

Question

每當用戶在我的應用程序上放置無效路徑時，我都會嘗試重定向到我創建的錯誤頁面。 假設用戶放置 domain.com/efneroguqf 或任何隨機路徑。

這是我在 App.js 中的 App 函數

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <Suspense fallback={(<div>Loading</div>)}>
          <Navbar />
          <Route exact path="/" component={Home} />
          <Route path="/SignUp" component={SignUp} />
          <PrivateRoute path="/Publish" component={Publish} />
          <Route path="/AdminGenerator" component={AdminGenerator} />
          <Route path="/AdminUsers" component={AdminUsers} />
          <Route path="/List" component={List} />
          <Route path="/publication" component={Details} />
          <Route path="/error" component={ErrorBoundary} />
          <PrivateRoute path="/MyPublications" component={MyPublications} />
          <PrivateRoute path="/MyFavorites" component={MyFavorites} />
          <PrivateRoute path="/MyInformation" component={MyInformation} />
          <PrivateRoute path="/EditPublication" component={EditPublication} />
          <Route exact path="*" component={Home} />
        </Suspense>
    </BrowserRouter>
    </div>

  );
}

現在我想重定向到 /error 以防路徑無效，就像我上面提到的那樣。 我怎樣才能做到這一點？

更新：這是我的錯誤頁面。 發生這種情況時，我想將編碼設置為 404。

class ErrorBoundary extends React.Component {

    constructor(props) {
        super(props);
        this.state = { 
            coding: props.location.state.coding
        };
    }

    render(){
        const { t } = this.props;
            var codeMsg = t('errors.errorCode') + this.state.coding 
            return ( 
                <div>
                    <div id="error-container">
                        <h1 id="error-title">{t('errors.errorTitle')}</h1>          
                        <p id="error-status">{codeMsg}</p>      
                        <p id="error-message">{t('errors.errorMessage')}</p>
                    </div>
                    <div id="link2-container">
                    <a href="/" id="error-link1">{t('errors.errorBackHome')}</a>
                    </div>  
                </div>
            );     
    }

}

Answer 1

作為最后一條路徑，使用通配符..

// last path in route list
<Route path="*" component={NotFoundPage} />

使用 404 頁面：

 const { Component } = React; const { render } = ReactDOM; const { Switch, Route, Link, HashRouter, withRouter } = ReactRouterDOM; class Header extends Component { render() { return ( <div> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/about'>About</Link></li> <li><Link to='/contact'>Contact</Link></li> <li><Link to='/iDontReallyExist'>Simulate Non-existent route</Link></li> </ul> </div> ); } } class Main extends Component { render() { return ( <main> <Switch> <Route exact path='/' component={HomePage}/> <Route path='/about' component={AboutPage}/> <Route path='/contact' component={ContactPage}/> <Route path='*' component={FourZeroFour}/> </Switch> </main> ); } } class HomePage extends Component { render() { return ( <div>Home Page</div> ); } } class AboutPage extends Component { render() { return ( <div>About Page</div> ); } } class ContactPage extends Component { render() { return ( <div>Contact Page</div> ); } } class SomeNonExistentRoute extends Component { render() { return ( <div>I dont exist</div> ); } } class FourZeroFour extends Component { render() { return ( <div>Uh oh can't find that! 404!</div> ); } } class Application extends Component { render() { let curRoute = this.props.location.pathname return ( <div> <Header /> <p>Current Route: {curRoute}</p> <Main /> </div> ); } } const App = withRouter(Application); render(( <HashRouter> <App /> </HashRouter> ), document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"></script>

主頁為“404”：

 const { Component } = React; const { render } = ReactDOM; const { Switch, Route, Link, HashRouter, withRouter } = ReactRouterDOM; class Header extends Component { render() { return ( <div> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/about'>About</Link></li> <li><Link to='/contact'>Contact</Link></li> <li><Link to='/iDontReallyExist'>Simulate Non-existent route</Link></li> </ul> </div> ); } } class Main extends Component { render() { return ( <main> <Switch> <Route exact path='/' component={HomePage}/> <Route path='/about' component={AboutPage}/> <Route path='/contact' component={ContactPage}/> <Route path='*' component={HomePage}/> </Switch> </main> ); } } class HomePage extends Component { render() { return ( <div>Home Page</div> ); } } class AboutPage extends Component { render() { return ( <div>About Page</div> ); } } class ContactPage extends Component { render() { return ( <div>Contact Page</div> ); } } class SomeNonExistentRoute extends Component { render() { return ( <div>I dont exist</div> ); } } class FourZeroFour extends Component { render() { return ( <div>Uh oh can't find that! 404!</div> ); } } class Application extends Component { render() { let curRoute = this.props.location.pathname return ( <div> <Header /> <p>Current Route: {curRoute}</p> <Main /> </div> ); } } const App = withRouter(Application); render(( <HashRouter> <App /> </HashRouter> ), document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"></script>

Answer 2

 <Switch>
  ...
  <Route component={Error} />
<Switch />

如果您渲染Route但未指定 path prop，則將始終渲染該路由。

Answer 3

如果您使用的是 React v6+，我們必須在 Route 中使用 element 而不是組件。 並且可以指定錯誤頁面功能組件，如下圖：

    import React, { Component } from 'react';
    import './App.css';
    import Login from './component/Login';
    import Register from './component/Register';
    import Home from './component/Home'
    import { BrowserRouter, Route, Routes } from 'react-router-dom';
    
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <BrowserRouter>
              <Routes>
                <Route path="/" element={<Login/>}></Route>
                <Route path="/register" element={<Register/>}></Route>
                <Route path="/home" element={<Home/>}></Route>
                <Route path="*" element={<ErrorComponent/>}></Route>
              </Routes>
            </BrowserRouter>
          </div>
        );
      }
    }
    
    function ErrorComponent(){
      return <div>Some error occured. Invalid page</div>
    }
    
    export default App;