https://github.com/sakshisrivastava413/react-routing-demo
https://github.com/sakshisrivastava413/react-routing-demo
Last synced: 4 months 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 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T03:13:15.000Z (almost 3 years ago)
- Last Synced: 2025-03-13T02:25:58.452Z (8 months ago)
- Language: JavaScript
- Size: 360 KB
- Stars: 0
- Watchers: 1
- 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
```