Реагировать перенаправить маршрутизатор, когда URL-адрес не является правильным

Question

Можете ли вы помочь мне!

Я застрял с URL-pameters. Когда я набираю http://localhost:3000/#/willmatch/sdf, меня перенаправляют. Это здорово, вот чего я хочу. Но когда http://localhost:3000/#/willmatch111/, ничего не происходит.

Можно ли получить перенаправление, если URL-адрес неверен?

Я пытался ввести http://localhost:3000/#/willmatch1, но я остаюсь на WillMatch, но я хочу получить NoMatch, если url неверен

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

Вы должны иметь возможность разместить что-то подобное в нижней части ваших маршрутов, убедитесь, что это внизу, иначе это будет соответствовать каждому маршруту.Он будет перенаправлен, если маршрут не найден среди остальных!

Answer 2

Похоже, он думает, может быть, он думает, 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

A <Switch> отображает первого дочернего элемента <Route>, который соответствует.A <Route> без указания пути всегда соответствует

Answer 3

Попробуйте <Route exact strict path="/:id" component={WillMatch} />

/:id является заполнителем, и он соответствует всем.Без strict оно соответствует /whatever и /whatever/.С strict он соответствует только /whatever.

Вам нужно либо перечислить все допустимые пути, либо проверить props.match.params.id внутри WillMatch компонента и перенаправить, если он недействителен.