Question

我正在研究本教程中的口袋妖怪应用列表：https://www.youtube.com/watch?v=XehSJF85F38&t=5904s

但是我遇到了问题，由于某种原因我的路线不起作用，我按照教程做了所有事情。这是我的代码：

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <div className="container">
          <Switch>
            <Route exact path="/"></Route>
            <Route exact path="pokemon/:pokemonIndex" component={Pokemon} />
          </Switch>
          <Body />
        </div>
      </div>
    </Router>
  );
}

我在另一个组件中调用它：

render() {
return (
  <div className="col-md-4 col-sm-6 mb-3">
    <Link to={`pokemon/${this.state.pokemonIndex}`} className="cardLink">
      <div className="card cardeffect">
        <h5 className="card-header">
          {this.state.pokemonIndex}. {this.state.pokemonName.toUpperCase()}
        </h5>
        {this.state.imageLoading ? (
          <img
            src={loading}
            style={{ width: "6em", height: "6em" }}
            className="card-img-top mx-auto mt-2"
          />
        ) : null}
        <div className="card-body mx-auto">
          <Sprite
            className="card-image-top mx-auto mt-2"
            onLoad={() => this.setState({ imageLoading: false })}
            onError={() => this.setState({ request: true })}
            src={this.state.imageUrl}
            style={
              this.state.tooManyRequest
                ? { display: "none" }
                : this.state.imageLoading
                ? { display: "none" }
                : { display: "block" }
            }
          ></Sprite>
        </div>
      </div>
    </Link>
  </div>
);

}

但是当我点击任何卡片时，URL 会发生变化，仅此而已，什么也没有发生。

Answer 1

哎！

我不确定，但我认为 Link 不适合您想做的事情。例如，可以在导航栏项上创建链接，但不能触发重定向 onclick。

也许可以尝试在您的卡片上使用带有 Redirect component 的 onclick 事件。像这样的事情可能会奏效：

<div className="card-body mx-auto" onclick={() => {return <Redirect to=`pokemon/${this.state.pokemonIndex}`}>
      <Sprite
        className="card-image-top mx-auto mt-2"
        onLoad={() => this.setState({ imageLoading: false })}
        onError={() => this.setState({ request: true })}
        src={this.state.imageUrl}
        style={
          this.state.tooManyRequest
            ? { display: "none" }
            : this.state.imageLoading
            ? { display: "none" }
            : { display: "block" }
        }
      >
     </Sprite>
    </div>

你或许也可以直接在 Sprite 组件中触发事件，同上这个包。

跳出来会有帮助！

Answer 2

在定义路由时从根执行此操作对您很有用。

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <div className="container">
          <Switch>
            <Route exact path="/"></Route>
            <Route path="/pokemon/:pokemonIndex" component={Pokemon} />
          </Switch>
          <Body />
        </div>
      </div>
    </Router>
  );
}

和

render() {
return (
  <div className="col-md-4 col-sm-6 mb-3">
    <Link to={`/pokemon/${this.state.pokemonIndex}`} className="cardLink">
      ...
      ...
    </Link>
  </div>
);

Answer 3

感谢您的回答。

路线不起作用，我尝试手动输入但没有任何反应。

导入：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import NavBar from "./Components/layout/NavBar";
import Body from "./Components/layout/Body";
import Pokemon from "./Components/pokemon/Pokemon";

代码：

function App() {
  return (
    <Router>
    <div className="App">
      <NavBar />
      <div className="container">
        <Switch>
          <Route path="/body" component={Body} />
          <Route path="/pokemon" component={Pokemon} />
        </Switch>
        <Body />
      </div>
    </div>
  </Router>
  );
}

但是当我输入 http://localhost:3000/body 或 http://localhost:3000/pokemon 时，在我的本地主机上不起作用。

当我点击反应路由器时，什么也没有发生

3 个答案: