当用户尝试将 append 随机字符串发送到 URL 时，我如何将用户重定向到“未找到页面”？

Question

我目前正在使用 react.js 开发 web 应用程序。 当用户尝试将随机字符串 append 发送到 URL 时，我想将用户重定向到 static“未找到页面”。

当前代码如下：

const Routes = () => {
    return (
        <Switch>
            <Route path = '/home'  component={Home1}/>
            <Route path = '/'  component={Home}/>
            <Route path="*" component={NotFoundPage}/>
        </Switch>
    );
};

export default Routes;

我试图通过添加以下行将用户重定向到“未找到页面” - 但它仍然无法正常工作。

Answer 1

您需要像这样在Route组件中使用exact道具：

const Routes = () => {
    return (
        <Switch>
{
  //exact keyword used so only the exact path will result showing the component
}
            <Route exact path='/' component={Home}/> 
            <Route exact path='/home' component={Home1}/>

{
  // Not using exact keyword will result in showing NotFoundPage to every other URL except above two paths
}
            <Route component={NotFoundPage}/>
        </Switch>
    );
};

export default Routes;

Answer 2

首先，您要确保路线是否与它不完全相关。 我创建了一个片段，希望它能解决您的查询：

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect
} from "react-router-dom";

// You can use the last <Route> in a <Switch> as a kind of
// "fallback" route, to catch 404 errors.
//
// There are a few useful things to note about this example:
//
// - A <Switch> renders the first child <Route> that matches
// - A <Redirect> may be used to redirect old URLs to new ones
// - A <Route path="*> always matches

export default function NoMatchExample() {
  return (
    <Router>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/old-match">Old Match, to be redirected</Link>
        </li>
        <li>
          <Link to="/will-match">Will Match</Link>
        </li>
        <li>
          <Link to="/somerandomstring">not found</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/old-match">
          <Redirect to="/will-match" />
        </Route>
        <Route path="/will-match">
          <WillMatch />
        </Route>
        <Route path="*">
          <NoMatch />
        </Route>
      </Switch>
    </Router>
  );
}

function Home() {
  return <h3>Home</h3>;
}

function WillMatch() {
  return <h3>HOme2!</h3>;
}

function NoMatch() {
  return (
    <div>
      <h3>No page found</h3>
    </div>
  );
}

这是沙盒链接： https://codesandbox.io/s/react-router-no-match-404-8wvj6