时间戳

首页 > 解决方案 > 如何使用链接将用户重定向到不同的页面

reactjs - 如何使用链接将用户重定向到不同的页面

问题描述

我有如下代码。我希望当我点击链接时它应该将我引导到另一个页面。但它什么也没做。有人可以帮忙吗？

<Link className="portfolio-link" data-toggle="modal" to={`/blog/${this.props.post.slug}`}>
    <div className="portfolio-hover">
        <div className="portfolio-hover-content">
            <i className="fas fa-plus fa-3x"></i>
        </div>
    </div>
    {this.props.post.PostImage ? this.props.post.PostImage.length > 0 ? <img style={{width: '100%'}} className="img-fluid" src={API.makeFileURL(this.props.post.PostImage[0].thumbnail, null)} alt="/"/>
: null: null}      
</Link>

标签： reactjs

解决方案

您可以为导航目的创建单独的组件，您可以在其中放置所有 url 链接

导航栏组件

import React from "react";
import { Link } from "react-router-dom";
const NavBar = ({ menuData }) => {
  return (
    <nav>
      <ul>
          {menuData.map(menu => {
            return (
              <li>
                <Link to={menu.path}>
                  {menu.name}
                </Link>
              </li>
            );
          })}
        </ul>
     </nav>
  );
};

export default NavBar;

您必须确保路由部分，此部分专门管理您的路由，它会根据 url 更改将您重定向到所需的页面/组件

<Switch>
   <Route exact path="/login" component={Login} />
   <Route exact path="/" component={Home} />
</Switch>

所以我在 App.js 中保持 NavBar 和路线紧密

应用程序.js

import React, { Component } from "react";
import NavBar from "./navbar";
import { Route, Redirect, Switch } from "react-router-dom";
import "./App.css";

class App extends Component {
  state = {
    navBars: [
      { name: "Home", path: "/" },
      { name: "Login", path: "/login" }
    ]
  };

  render() {
    return (
      <React.Fragment>
        <main>
          <NavBar
            menuData={this.state.navBars}
          ></NavBar>
          <div className="content">
            <Switch>
              <Route exact path="/login" component={Login} />
              <Route exact path="/" component={Home} />
            </Switch>
          </div>
        </main>
      </React.Fragment>
    );
  }
}

export default App;

最后你必须确保你的导航栏/链接和路由应该在路由器下，所以 BrowserRouter 确认这件事

<BrowserRouter>
   <App />
</BrowserRouter>

你可以看看我的 index.js

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter} from "react-router-dom";

import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

希望对你有帮助

推荐阅读