Respond to link with tag and arrow function

Question

Hi guys, I am a beginner programmer just started working on a router.

I have two questions. What is the difference between using <Link to="/page"> and <a href="page"> ? Both make the same request to get /page , but I get an error when I use <a href="page"> , but it works when I use <Link to="/page"> when I find routes. I don’t understand how there could be any difference when I know that both renderings have an exact url

The second is the weird arrow function in the documentation for interacting with the v4 router

 const About = () => ( <div> <h2>About</h2> </div> ) 

I know () => {} they are new in ES6, but I can not find anything in ordinary brackets instead of parentheses. What they?

Edit

My class is index.js (I have all the imports)

 render(( <Router> <div> <Route component={App}/> </div> </Router> ), document.getElementById('root') ); 

My class is App.js

 class App extends Component { render() { return ( <div className="container"> <header> <span className="icn-logo"><i className="material-icons">code</i></span> <ul className="main-nav"> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/teachers">Teachers</Link></li> <li><Link to="/courses">Courses</Link></li> </ul> </header> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/teachers" component={Teachers}/> <Route path="/courses" component={Course}/> </div> ); } } export default App; 

The error I am getting. Cannot GET /about in the browser when I try to switch to localhost:8080/about . However, when I click on the about button, it goes to the exact URL /about and displays fine

Answer 1

It may be a little late to solve your problem, and you may well understand it. But here is my trick:

First: "What is the difference between using <Link to="/page"> and <a href="page"> "

• At first glance, you seem to be comparing apples and oranges here. The path in the anchor tag is a relative path, while the one in Link is absolute (that's right, I don't think react-router supports relative paths yet). There is a problem: you are on /blah , and clicking on Link goes to /page , clicking on <a href='page' /> will lead you to /blah/page . This may not be a problem, because since you confirmed the URL is correct, but thought about it.
• A slightly deeper difference, which is just a complement to @ Dennis's answer (and the documents he points to), is when you are already on a route that matches what Link points to. Suppose we are currently on /page , and Link points to /page or even /page/:id , this will not cause the full page to refresh, while the <a /> tag will naturally. See the Question on Github .

The fix I used to solve my little need was to pass the state property to a link like so <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link> . Then I can check this in the target component (say <Page /> ) componentWillReceiveProps as follows:

 componentWillReceiveProps(nextProps){ if (nextProps.location.state === 'desiredState') { // do stuffs } } 

Second question: arrow functions; again, @Dennis and @Jaromanda X were already accessing it. However, I have three bits to add:

• When you have () => blah without curly braces {} , you implicitly return everything that follows => in this case blah . But when you have braces right after the arrow, now it’s your responsibility to return something if you wish. So, () => blah (which, by the way, is synonymous with () => (blah) ), will be more like () => { return blah } , rather than () => { blah } .
• So, what happens if you want to return an object: { blah: blah } ; this is what @Jaromanda X points to. Then you will need to do () => ({ blah: blah }) or just () => ({ blah }) for an implicit return, or you can explicitly return like this () => { return { blah: blah } } .
• My third bit points to MDN

Hope this helps.

Answer 2

The component allows you to do more than a regular link element. For example, since it is a React component, you have the advantages of having state and what not (if you want it). You can see more documentation here . Without error, I'm not sure what will happen, but I suspect that the routing library wants you to use the component, over the regular html element.

As for () => {} , this is a construct called anonymous function or lambda expression. This is basically the same as storing a function in a variable: var x = function(){ return (<div>...) }; , if you have anything in the first bracket, this is the parameter you have access to: const x = (y) => return y*2; The reason this is done in React is to open the function area for the component in which it resides.