当 url 不正确时 React Router 重定向

Question

你能帮帮我吗！

我被 url 参数卡住了。当我输入 http://localhost:3000/#/willmatch/sdf 时，我被重定向了。太好了，这就是我想要的。但是当 http://localhost:3000/#/willmatch111/ 时，什么都没有发生。

当 url 不正确时是否可以重定向？

我尝试输入 http://localhost:3000/#/willmatch1 ，但我仍然使用 WillMatch，但如果 url 不正确，我想获取 NoMatch

import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/willmatch">Will Match</Link></li>
            <li><Link to="/will-not-match">Will Not Match</Link></li>
            <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
          </ul>

          <Switch>
            <Route path="/" exact component={Home} />
            <Route exact path="/:id" component={WillMatch} />
            {/* <Route component={NoMatch} /> */}
            <Redirect to="/" />
          </Switch>
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>Home</h1>
}

function WillMatch({ match }) {
  return <h1>{match.params.id}</h1>
}

function NoMatch() {
  return <h1>NoMatch}</h1>
}

export default App;

Answer 1

试试<Route exact strict path="/:id" component={WillMatch} />

/:id 是一个占位符，它匹配所有内容。如果没有strict，它将匹配/whatever 和/whatever/。对于strict，它只匹配/whatever。

您要么需要列出所有有效路径，要么检查props.match.params.id 内的WillMatch 组件，如果无效则重定向。

Answer 2

您应该能够在您的路线底部放置这样的东西，确保它位于底部，否则它将匹配每条路线。如果在其余路由中找不到路由，它将重定向！

Answer 3

看起来它认为它可能认为willmatch 是:id。我有一个这样的工作：

<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/:id" component={WillMatch} />
    <Route path="/notfound" exact component={NoMatch} />
    <Redirect to="/notfound" />
</Switch>

你也可以试试：

    <Route path="/thing/:id" component={WillMatch} />

这里提供了一个类似的例子：

https://reacttraining.com/react-router/web/example/no-match

<Switch> 呈现第一个匹配的子 <Route>。没有路径的<Route> 始终匹配