如何使用React创建指向我的导航栏的超链接？

Question

import React, { Component } from 'react';


class About extends Component {
  render() {
    return(
      <div><h1>About Page</h1></div>
    )
  }
}

export default About;

I have been stuck for an hour trying to figure out how to create a hyperlink similar to href but with react. This is a new .js file and I want to create an external link to it so when I click the Nav Bar , instead of it directing me to blank page, it can direct me to my Twitter or something else. Thanks!

Answer 1

You could do like this

import React from 'react';
import { Link } from 'react-router';

class About extends React.Component {
    render() {
        return (
            <div>
                <p>Click here to know about us.</p>
                <ul>
                    <li><Link to="/about">About Us</Link></li>
                </ul>
            </div>
        );
    }
}

export default About;

Answer 2

you can use react-router for it. https://reacttraining.com/react-router/web/example/custom-link it has a link element when you wrap in router you should be able to change the route.. hope it helps

Answer 3

Try this

import React, { Component } from 'react';
import { Link } from 'react-router';


class About extends Component {
  render() {
    return(
      <div><h1>About Page</h1>
     <Link to="url" activeClassName="active">"Link Name"</Link>
      </div>
    );
  }
}

export default About;

For more explanation visit here

Answer 4

Link is a component of react-router-dom not react-router . Try changing your import as follows:

import React from 'react';
import { Link } from 'react-router-dom';

class About extends React.Component {
    render() {
        return (
            <div>
                <p>Click here to know about us.</p>
                <ul>
                    <li><Link to="/about">About Us</Link></li>
                </ul>
            </div>
        );
    }
}

export default About;