当我点击反应路由器时没有任何反应答案

【问题标题】：When I click on react router nothing happen当我点击反应路由器时没有任何反应
【发布时间】：2021-02-10 09:20:24
【问题描述】：

我正在研究本教程中的口袋妖怪应用列表：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 会发生变化，但仅此而已。

【问题讨论】：

标签： reactjs rxjs react-router

【解决方案1】：

喂！

我不确定，但我认为 Link 不适合你想做的事情。例如，可以在 navbaritem 上创建链接，但不能触发 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 组件中触发事件，Idk 这个包。

跳下去会有帮助！

【讨论】：

【解决方案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>
);

【讨论】：

【解决方案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 时，在我的本地主机上不起作用。

【讨论】：