Question

我想使用React Router链接到其他组件。我想将链接添加到按钮。

就像下面在我的代码中看到的那样，我想转到另一个组件而不是google.com链接，假设我有一个./starter组件

Answer 1

您必须从react-router-dom导入链接，而不是使用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;

希望有帮助！！！：）

如何在React.js中添加指向这些按钮的链接

1 个答案: