javascript - 路径无效时重定向到错误页面

Question

每当用户在我的应用程序上放置无效路径时，我都会尝试重定向到我创建的错误页面。假设用户输入了domain.com/efneroguqf 或任何随机路径。

这是我在 App.js 中的应用程序函数

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>