react-router

React Router v4 – How to get current route?

by

I’d like to display a title in <AppBar /> that is somehow passed in from the current route. In React Router v4, how would <AppBar /> be able to get the current route passed into it’s title prop? <Router basename=”/app”> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title=”Test” /> <Route path=”/customers” … Read more

Nested routes with react router v4 / v5

by

I am currently struggling with nesting routes using react router v4. The closest example was the route config in the React-Router v4 Documentation. I want to split my app in 2 different parts. A frontend and an admin area. I was thinking about something like this: <Match pattern=”https://stackoverflow.com/” component={Frontpage}> <Match pattern=”/home” component={HomePage} /> <Match pattern=”/about” … Read more

react-router – pass props to handler component

by

I have the following structure for my React.js application using React Router: var Dashboard = require(‘./Dashboard’); var Comments = require(‘./Comments’); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path=”https://stackoverflow.com/” handler={Index}> <Route path=”comments” handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function … Read more

React Router with optional path parameter

by

I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data): http://localhost/app/path/to/page <= render the page http://localhost/app/path/to/page/pathParam <= render the page with some data according to the pathParam In my react router I have the following paths, in order to … Read more

How to push to History in React Router v4?

by

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn’t available in v4, and I’m not sure what the appropriate way to handle this is. In this example, using Redux, components/app-product-form.js calls this.props.addProduct(props) when a user submits the … Read more

How to get parameter value from query string?

by

How can I define a route in my routes.jsx file to capture the __firebase_request_key parameter value from a URL generated by Twitter’s single sign on process after the redirect from their servers? http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla I tried with the following routes configuration, but the :redirectParam is not catching the mentioned param: <Router> <Route path=”https://stackoverflow.com/” component={Main}> <Route path=”signin” … Read more

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

by

I am getting this error: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. This is my code: var React = require(‘react’) var ReactDOM = require(‘react-dom’) var Router = require(‘react-router’) var Route = Router.Route var Link = Router.Link var App = … Read more

React-router urls don’t work when refreshing or writing manually

by

I’m using React-router and it works fine while I’m clicking on link buttons, but when I refresh my webpage it does not load what I want. For instance, I am in localhost/joblist and everything is fine because I arrived here pressing a link. But If I refresh the webpage I get: Cannot GET /joblist By … Read more