https://github.com/sakshisrivastava413/react-routing-demo

https://github.com/sakshisrivastava413/react-routing-demo

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/sakshisrivastava413/react-routing-demo
• Owner: Sakshisrivastava413
• License: cc0-1.0
• Created: 2020-06-21T15:26:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T03:13:15.000Z (about 2 years ago)
• Last Synced: 2024-11-18T22:06:29.249Z (3 months ago)
• Language: JavaScript
• Size: 360 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Routing Example

## Installation

```bash

npm install

npm start

open http://localhost:3000

```

## Set up in your own project

First install the `react-router` package as a dependency:

```bash

npm install --save react-router

```

Then set up the routes in your entrypoint:

```js

// src/index.js

// Import the Routing classes

import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';

// Import your own components to use in the `render()` function below

import App from './App';

import Welcome from './Welcome';

import About from './About';

import Projects from './Projects';

import Project from './Project';

import PageNotFound from './PageNotFound';

// Set up your routes

ReactDOM.render((

  

                               // everything will be under the `App` component

                             // the `Welcome` component will be rendered on `/`

                 // the `Projects` component will be rendered on `/projects`

        // the `Project` component will be rendered on `/project/`

                       // the `About` component will be rendered on `/about`

                     // all other routes will render `PageNotFound`

    

  

), document.getElementById('root'));

```

Now, we need to tell the `App` component to render the component passed

on by the Router and we can add links to other paths by using the `Link`

component from React Router.

```js

// src/App.js

import React from 'react';

import { Link } from 'react-router';

class App extends React.Component {

    render() {

        return (

          


            {/* Render some links to navigate */}

            

              


                
Home

                
Projects

                
About

              

            


            {/* Render the component passed on by the Router */}

            {this.props.children}

          

        );

    }

}


export default App;

```

## Accessing Route params

In our project route, we defined a `projectId` to be passed on in this

way:

```js

        // the `Project` component will be rendered on `/project/`

```

To access that `projectId`, we can use the `props.params` of the

component, so in this case we can get the id passed in as:

```js

// src/Project.js

this.props.params.projectId

```