Git Product home page Git Product logo

routing-on-create-react-app's Introduction

Customizing Create React App : Routing

Routing on Create React App

Getting started customizing polyreact .

Edit js file : index.js

# File path : ~/polyreact/src/index.js
- ReactDOM.render(<App />, document.getElementById('root'));
+ ReactDOM.render(
+   <Provider store={store}>
+     <ConnectedRouter history={history}>
+       <div>
+         <App />
+       </div>
+     </ConnectedRouter>
+   </Provider>,
+ document.getElementById('root'));

Create directory and js file : container

# Current path : ~/polyreact/src
mkdir container
// File path : ~/polyreact/src/container/featured.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class Featured extends Component {
  render() {
    return (
      <p>Featured</p>
    );
  }
}

export default Featured;
// File path : ~/polyreact/src/container/About.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class About extends Component {
  render() {
    return (
      <p>About</p>
    );
  }
}

export default About;
// File path : ~/polyreact/src/container/Article.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class Article extends Component {
  render() {
    return (
      <p>Article</p>
    );
  }
}

export default Article;

Edit js file : App.js

# File path : ~/polyreact/src/app.js
+ import Featured from './container/Featured.js';
+ import About from './container/About.js';
+ import Article from './container/Article.js';
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
+         <Link to="/"><p>Featured</p></Link>
+         <Link to="/about"><p>About</p></Link>
+         <Link to="/article"><p>Article</p></Link>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
+         <Route exact path="/" component={Featured} />
+         <Route exact path="/about" component={About} />
+         <Route exact path="/article" component={Article} />

โ†’ Open http://localhost:3000 to see polyreact .

Demo : koheishingaiHQ.github.io/routing-on-create-react-app

routing-on-crate-react-app-screen-shot

routing-on-create-react-app's People

Contributors

koheishingaihq avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.