score:3
yes sure this is possible.
let me give you some background over this. if you are building spa with multiple pages, you would like to use a client-side routing in otder to display differen page based on the browser url. as i know defacto solution for routing in react is react-router but there are many other to chose from. see this link. unfortunately, i won't be able to completely explain how to use react-router
solution, but here is a brief example.
inside your main component (like app.jsx) add routing:
// 1. do proper imports
import { browserrouter } from "react-router-dom";
// 2. wrap your application inside of browserrouter component
class app extends react.component {
// your code
render() {
return (
<browserrouter>
{/* your app code */}
{/* add routing */}
<route path="/" exact component={dashboard} />
<route path="/questions/id/:id" component={question} />
{/* your app code */}
<browserrouter>
)
}
}
you should see now that when your browser url matches /questions/id/:id
component question
should be mounted to the page. inside this component, you can fetch id
that was passed in. it will be inside this.props.match.param.id
property
class question extends react.component {
// your code
render() {
const id = this.props.match.param.id;
return (
<div>
page with { id } was opened
<div>
)
}
}
sure you would like to familiarise yourself with react-router
docs.
score:0
reactjs don't include a router. but the most popular package to do this is react-router. the official documentation references other good packages
Source: stackoverflow.com
Related Query
- Can we create a link with dynamic ID in SPA model
- How can I create dynamic input sliders with react?
- How do I create a dynamic drop down list with react-bootstrap
- ¿How can I add a link within a DropdownItem with reactstrap?
- How to create dynamic routes with react-router-dom?
- How can I serve robots.txt on an SPA using React with Firebase hosting?
- How to create a dynamic Link to attribute in React-Router 2.5
- Can I use react router Link with CardActionArea?
- How can I change the color of a Link in React with Material-UI?
- Can you use Material-UI Link with react-router-dom Link?
- How can I create a custom page with #react-admin without the menu sidebar like login page?
- How to create a link in a row with @material-ui/data-grid
- How can I create a search with multiple, optional, parameters using JavaScript?
- How to create dynamic drag and drop layout with react-grid-layout
- How can I create api end point in Next.js with query string
- How can I create dynamic titles in next.js <head> section?
- How to create a link in React component with onClick handler?
- Can I use Create React App Jest Testing with a test reporter without ejecting?
- Is there any way to create dynamic slugs with Gatsby using a template component / page?
- How to create dynamic form input fields in React with ANTd
- React JS: How do I create a downloadable link with PDF documents to download?
- Can anyone advise on the best way to integrate React Drag/Drop Lists with dynamic values from Redux?
- How can we implement an Open with Postman button to open a postman collection link sent from a third party react application?
- Can I create a Knob in React Storybook to modify an array with 4 values where each value has a select dropdown?
- Can i import the SVG file as a react component with dynamic import() Expressions?
- How do I create user-customizable dynamic url with api-generated content in NextJS+React?
- How can I create custom Tabs with multiple labels per tab in material UI?
- how can injection dynamic html element to page with next.js?
- Is there a way that I can create a custom column with auto numbering in material-table?
- How can I configure create-react-app to create an app with classes and not functions?
More Query from same tag
- How to fix import/export babel-eslint without configuration file?
- React Flow possible null value with document.body.classList.add
- Unable to submit form data while submitting from React to Node/express using AXIOS
- React Hooks FileReader. Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering
- React - how to pass a prop into a class function call that is then accessed in componentDidMount function
- connect multiple reducers using decorator in redux
- can't use child props in react
- How to slide or hide a div with transition in react?
- ReactJS how to use if function
- React Live-Search with Fetch API
- React-router URLs don't work when refreshing or writing manually
- Is there a way to get the coordinates from this draggable marker using google-map-react?
- Next Js showing index of build folder when using serve
- retrieving images from firebase storage to show in a component
- Run function only when tab/window is actually closed
- Problem when the second time create peerconeection WebRTC ( A sender already exists for the track.), any idea should I handle
- Setting a mockFunction through context on a class based component with jest and enzyme
- How to set state of a react component with a specific item from a returned json object?
- Play HLS video from S3 using CookPete/react-player
- How update value in redux reducer if it's inside of object
- Getting TypeError: Cannot read property 'map' of undefined error
- Material-UI Button Component doesn't work properly after deploy on Github Pages
- Don't remount component but change values
- How to find nested element in jest by value of attribute
- Cannot read property setState of undefined
- How should I dynamically query the data per month?
- Redux-Form and React-RTE - Save RTE editorValue to form state?
- React Router how to change class name of an element in a component when route changes?
- Overwriting styled component 3 times?
- How to refer a css file from index.html in React