Question

我有类似波纹管的代码。我想要当我单击链接时将其定向到另一页。但是它什么也没做。有人可以帮忙吗？

<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>

Answer 1

您可以创建用于导航的单独组件，在其中可以放置所有URL链接

NavBar组件

@Bean
public CommandLineRunner demo(Bulk_repositoryRepository repository) {
    return (args) -> {          
    log.info("--------------------------------------------");
         repository.findAllByStatusAndCampTypeAndCampStartDateLessThanEqualAndCampEndDateGreaterThanEqual(0,2,currentDate,currentDate).forEach(on -> {
                log.info(on.toString());
            });
        };
    }
}

您必须确保路由部分，该部分专门管理您的路由，它将根据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;

所以我将NavBar和路线紧密放在App.js中

App.js

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

最后，您必须确保您的导航栏/链接和路由应位于Router下，因此BrowserRouter确认这件事

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;

您可以在我的index.js中查看

index.js

<BrowserRouter>
   <App />
</BrowserRouter>

希望对您有帮助

如何使用链接将用户重定向到其他页面

1 个答案: