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

尝试GraphConvolutionalLayer

<Route exact strict path="/:id" component={WillMatch} />是一个占位符，它匹配所有内容。如果没有/:id，它将与strict和/whatever匹配。对于/whatever/，它仅与strict匹配。

您需要列出所有有效路径，或者检查/whatever组件内的props.match.params.id并重定向（如果无效）。

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>总是匹配

网址不正确时，React Router重定向

3 个答案: