如何在 React.js 中添加指向這些按鈕的鏈接

Question

我想使用反應路由器鏈接到其他組件。 我想將鏈接添加到按鈕。

正如您在下面的代碼中看到的那樣，我想轉到另一個組件而不是 google.com 鏈接，假設我有一個 ./starter 組件

Answer 1

你必須從 react-router-dom 導入 Link 而不是使用window.location.href我們使用<Link to='/path'>

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import SECOND from './data/second';

class Seconds extends Component{
    render(){
        const{title, image, link}=this.props.second;
        return(
            <div style={{display: 'inline-block', width: 300, margin: 10}}>
            *//this is where i want to add the router links to other component, how do I do it??    
<Link to={link}><button><img src={image} alt='profile' style={{width: 90, height: 70, borderRadius: 5}}/><aside>{title}</aside>
                </button></Link>
            </div>
        )
    }
}

現在您可以將 app.js 包裝在 Router 中並使用 Route 標簽處理路徑以加載組件。

 import React, {Component} from 'react';
 import First from './First';
 import './App.css';
 import Second from './Second';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import MyComponent from '/path';

    class App extends Component{
       render(){      
          return(
             <Router>
              <hr/>
               <First/>
              <hr/>
              <Second/>
              <Route path='/yourpath' component={MyComponent} />
             </Router>
          )
      }
    }
    export default App;

希望能幫助到你！！！ :)