从 App.js 导航到 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?

Answer 1

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'));

Answer 2

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.