Navigating from App.js to Places.js

Question

I am a newbie to React.I am playing around with it quite a bit.Now I want to navigate from App.js to Places.js .I agree that it can be done using React-router but I could not yet figure that out successfully. I need help in this regard.Having said this I tried few combinations using HashRouter, Route and Navlink but all efforts were in vain.

Here is my App.js

    import {Link,Router} from 'react-router-dom';
    import Places from './Places';
    import React, { Component } from "react";
    import { Card} from 'semantic-ui-react';


    class App extends Component {

    render() {

    return (
    <Router>
      <div className ="ui four stackable two column grid">

     <div className="column">
       <Card
         as = {Link} to = '/Places'
         header='Places'
         description='Click here to get list of places.'
        />
     </div>

...

     </div>
    </Router>

      );
    }
   }

And here is my Places.js

 import { Card} from 'semantic-ui-react';
 import axios from 'axios';

  export default class Places extends React.Component {

...

Basically I have App.js with 4 UI cards.When I click each one of them it should load the contents of the corresponding js files.Will this qualify as SPA?

Yes. router is for that purpose. you have to register your routes and give it in your logic — G_S, Feb 28 '18 at 10:21
Might be a duplication of https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router — Nah, Feb 28 '18 at 12:06

score 1 · Accepted Answer · answered Feb 28 '18 at 11:32

To define your routes. You have to import first react-router.

In your file app.js, you have to cut the content in another file (grid.js for example). 'App' will be the main container of your application Then you will create a file routes.js and describe your routes:

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/app';
import Grid from './components/Grid';
import Places from './components/Places';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Grid} />
    <Route path="places" component={Places} />
  </Route>
);

Here, with IndexRoute, you say that your default route will load 'Grid' so the list of cards.

Then, in app.js file, you write in your render function {this.props.children} where you want to display your elements 'Grid' and 'Places'.

Finally, in your file 'index.js', you will import your routes, and the router:

import { Router, browserHistory } from 'react-router';
import routes from './routes';

And, in the function ReactDOM.render, define your routes:

ReactDOM.render(
  <Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));

score 0 · Answer 2 · answered Feb 28 '18 at 11:56

You can handle routing by keeping your routes in separate file and handle component rendering from there.

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import {render} from 'react-dom';
import Places from '../Places.js';

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
     <Route path='/Places' component={Places}></Route>
    </Route>
  </Router>, document.getElementById('app')
);

When you'll navigate to '/Places' route, it will render Places component.

Navigating from App.js to Places.js

2 Answers2