I am having a problem with React Router and a paging. If I am at the root of the project and I click on the next button, it will go to mydomain.com/page/2 and so on. This is correct.
But if I am in mydomain.com/categories when I click next it goes to mydomain.com/page/2 but then if I give previous or next it begins to concatenate the routes in the form mydomain.com/page/2/page/1 / page / 2 and so on.
So are the routes:
<Route path="/categoria/:id/:slug/page/:page" exact>
<Category />
</Route>
<Route path="/categoria/:id/:slug">
<Category />
</Route>
To my pagination component I pass as props the current url, the array of products brought from the api, the current page and the number of pages:
<Pagination baseurl={`${urlActual}/`} pagina={pagina} productos={productsByTag} pageCount={pageCount}/>
As for the links of the buttons within the pagination component, they are made in the following way:
pagina ? (
<Link to={`${baseUrl}page/${Number(pagina)+1}`}>
<button className="btn btn-primary">Next</button>
</Link>
):(
<Link to={`${baseUrl}page/2`}>
<button className="btn btn-primary">Prev</button>
</Link>
)
Any idea why this could be happening?
Related
In my project based on type of application chosen by user, components have to rendered and further navigates to different routes. In all these applications the layout remains the same. I have to add the different components based on the routes.
Home page main component
<Card>
<Card.Body>
<DYNAMIC_COMPONENT /> //based on application chosen
<button onClick={()=> takeToNextRoute}>CLICK ME</button>
<Card.body>
</Card>
based on button click in Home, user will be taken to different routes based on Application type
<div>
<Router>
<Switch>
<Route exact path='/:{based on app}' component={dynamicCOMP}></Route>
<Route exact path='/about:{based on app}' component={dynamicCOMP1}></Route>
<Route exact path='/profile:{based on app}' component={dynamicCOMP2}></Route>
<Route exact path='/select:{based on app}' component={dynamicCOMP3}></Route>
</Switch>
</Router>
</div>
How to render the components in Home dynamically based on application chosen and then on button click route to dynamic routes with its dynamic components? I am new to ReactJs and have no clue how to go about this.
You can have an object with all the routes and components:
const routes = {
"/": HomeComponent,
"/about": AboutComponent,
"/profile": ProfileComponent,
"/select": SelectComponent
}
And then in your router, it would look like:
<div>
<Router>
<Switch>
{Object.keys(routes).map((route, i) => <Route key = {i} exact path = {route} component = {routes[route]}/>
</Switch>
</Router>
</div>
very new to react router. i know this code isn't written the cleanest but how come when i click the button (Link to='/question') it renders
and BUT also renders the button still. i tried
setting it into a new route but unfortunately still doesn't work.
also is this how you would structure a basic router that needs to
render two separate components? i see i can do render={} or component={}
but not really sure how to render more than one component with one
router---- wit those two questions considered i basically just want
this button to render a new page ('/question') that has two components on it--- AFIB and QFIB and nothing else (right now its rendering the button and the two new components in addition... here is the code:
<div class='qAndAContainer'>
<Router>
<Link to='/question'><button className="px-4 nextQuestion startButton py-2 bg-pink-600 text-white text-sm uppercase font-medium rounded hover:bg-pink-500 focus:outline-none" >Begin
</button>
</Link>
<Route path='/question' component={(props) => (
<QFIB {...props} />
)} />
<Route path='/question' component={(props) => (
<AFIB {...props} />
)} />
</Router>
</div>
)
}
export default StartTest
React Router's Route component is basically a glorified string-match for your browser's URL.
In this case, what you're presenting to React Router is three Routes with the same strings to match, so it shows them all!
This is actually useful, for example rendering the same navigation bar for /dashboard AND /dashboard/messages.
But in your case, you just want one route or the other. So for React Router to understand you just want one of many, you need to wrap your Routes with a Switch component. React Router will only render the first match it finds, from top to bottom. Try to order your Routes in a Switch from most specific (longest paths) to least to get the best results.
I don't really care for the render or children props of Route (although they have their purposes), I usually prefer composing just like normal components.
<Router>
<Switch>
// this will actually match /question123/asdf/kdkd?foo=bar as well...
<Route path="/question">
<QFIB />
<AFIB />
</Route>
// `exact` tells the Route is must be... exact
<Route path="/" exact>
<Link to="/question">Go to Questions</Link>
</Route>
</Switch>
</Router>
I am creating an application using ReactJS. I am using react router v4 from react-router-dom.
I have written routes in index.js file.
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path='/dashboard' component={Viewport} />
</Switch>
</BrowserRouter>
Rest of the application in Viewport.js file.
return (
<div className="">
<Sidebar navigation={this.viewport} />
<HeaderBanner user={this.props.user} />
<div className="center-panel">
//todo
//Can I use router here?
</div>
</div>
)
After user login's, I am rendering Viewport which contains Sidebar and header bar by default. Based on the item click in the sidebar navigation, I need to render components dynamically. As of now, if I write anything in the place of todo, it renders only that component for the complete browser window.
Is there any way to use routers in multiple places of the application? If yes, how can I implement it? If no, what's the best solution?
As far as I have seen, routers will be stacked at one place in the application.
Thanks in advance.
I followed a tutorial on youtube recently which was very useful
So I took some of it and applied it to your setup
<BrowserRouter>
<div>
<Route exact path="/" component={Login} />
<Route exact path='/dashboard' component={Viewport} />
</div>
</BrowserRouter>
import { NavLink, Route } from 'react-router-dom';
class Viewport extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div className="Side-bar">
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-1`}>Sub Page 1</NavLink>
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-2`}>Sub Page 2</NavLink>
<NavLink
activeClassName="active"
to={`${this.props.match.url}/sub-page-name-3`}>Sub Page 3</NavLink>
</div>
<HeaderBanner user={this.props.user} />
<div className="center-panel">
<Route path={`${this.props.match.url}/sub-page-name-1`} component={SubPagePanel1} />
<Route path={`${this.props.match.url}/sub-page-name-2`} component={SubPagePanel2} />
<Route path={`${this.props.match.url}/sub-page-name-3`} component={SubPagePanel3} />
</div>
</div>
)
}
}
I removed Switch as well because I didn't use it for my sub pages... :-S
Update: Have created a repo showing a working example of sub page content
https://github.com/PocketNinjaDesign/so-sub-routes-answer
Yes you can use <Routes> in as many places as you want. <Router> components are the ones you can only use once.
I have run into an issue where React Router's NavLink is not working upon the initial render of a dashboard screen, after a successful login. After trying many different things I am posting here. You probably won't know why either but its worth a shot.
An example layout of the dashboard is as follows:
<div>
<nav>
<NavLink>Link 1</NavLink>
<NavLink>Link 2</NavLink>
<NavLink>Link 3</NavLink>
<NavLink>Link 4</NavLink>
</nav>
<div>
<!-- CONTENT -->
</div>
</div>
Upon initial render Link 2 will be unresponsive, while Link 1, 3, and 4 work fine. Clicking Link 3 for example will render new elements in the content section and then Link 2 will work.
I have tried even changing the NavLinks to anchor tags and adding my own click handler, but no matter what I try the second Link will not work until some mysterious event takes place.
Any ideas?
Edit* Add routes for #arracso
Authenticated Route:
<Switch>
<Route path="/route-1" component={SomeComponent} />
<Route path="/*" component={Dashboard} />
</Switch>
Dashboard:
<Row>
{navigationElement}
<Column>
<Switch>
<Route path="/1" component={A} />
<Route exact path="/2" component={B} />
<Route path="/2/1" component={C} />
<Route path="/2/1" component={D} />
</Switch>
</Column>
</Row>
I am designing a multi-tabbed or multi-paged javascript web application that allows the URL to change depending on which tab you selected.
The best example I have seen is done by Zendesk
By calling it multi-tabbed, am I describing it correctly?
The tabs can be closed or opened depending on what is clicked.
How to create something like this using ReactJS? If there is a good tutorial, I am also happy to read through it.
This can easily be done with react router. If you are not familiar with react router go to the react router github page and check out the tutorials and docs. Here's an example of what it may look like to get you going.
Routes
<Route path="/" component={Application}>
<IndexRoute component={Home}/>
<Route path="tabs" component={TabLayout}>
<Route path="1" component={Tab1} />
<Route path="2" component={Tab2} />
</Route>
<Route path="about" component={About}/>
<Route path="*" component={NotFound} isNotFound/>
</Route>
Tab Layout
/* This is the layout for your tabs. Using react router to link to different tabs.
When the route changes props.children will be updated to reflect the current
route. You can add active classes to your tabs. Reference the react-router docs to
see how to do that
*/
import {Link} from 'react-router';
const TabLayout = props => {
return (
<section className="tab-container">
<div className="tabs">
<Link to="/tabs/1">Tab 1</Link>
<Link to="/tabs/2">Tab 2</Link>
</div>
<div className="content">
{props.children}
</div>
</section>
);
};
Tab 1 and tab 2 look like this
// Tab1 and Tab2 are just react components. For simplicity I am just using
// a stateless component.
const Tab1 = props => {
return (
<h1>Tab 1</h1>
);
};