react-router-v4

Trying to make certain routes require Authentication. I have this: class App extends Component { render() { const menuClass = `${this.props.contentMenuClass} col-xs-12 col-md-9`; return ( <BrowserRouter history={browserHistory}> <div className="App"> <Header properties={this.props} /> <div className="container-fluid"> <div className="row"> <SideNav /> <div className={menuClass} id="mainContent"> <Switch> {routes.map(prop => ( <Route path={prop.path} component={prop.component} key={prop.id} render={() => ( !AuthenticationService.IsAutheenticated() ? <Redirect to="/Login"/> : <Route path={prop

How in the world does one use nested routes in react-router , specifically, version 4.x? The following worked well in previous versions... <Route path='/stuff' component={Stuff}> <Route path='/stuff/a' component={StuffA} /> </Route> Upgrading to 4.x throws the following warning... Warning: You should not use <Route> component and <Route children> in the same route; <Route children> will be ignored What in the heck is going on here? I've scoured the docs for hours and can not successfully get nested routes working. How does one use <Route> components to nest their routes in react-router v4? How

I've read many things about react-router v4 and the npm history library to this point, but none seems to be helping me. My code is functioning as expected up to the point when it should navigate and do a simple redirect when the url is changed using the history.push() method. The URL IS changing to the specified route, but not doing the redirect on the button push. Thanks in advance, still learning react-router... I would like for the button push to do a simple redirect without the {forceRefresh:true}, which then reloads the whole page. import React from 'react'; import createBrowserHistory

I'm pulling my hair out trying to render multiple layouts with React Router v4. For instance, I'd like pages with the following paths to have layout 1: exact path="/" path="/blog" path="/about" path="/projects" and the following paths to have layout 2: path="/blog/:id path="/project/:id Effectively what's being answered here but for v4: Using multiple layouts for react-router components None of the other answers worked so I came up with the following solution. I used the render prop instead of the traditional component prop at the highest level. It uses the layoutPicker function to determine

I'm using react-router-dom 4.0.0-beta.6 in my project. I have a code like following: <Route exact path="/home" component={HomePage}/> And I want to get query params in HomePage component. I've found location.search param, which looks like this: ?key=value , so it is unparsed. What is the right way to get query params with react-router v4? The ability to parse query strings was taken out of V4 because there have been requests over the years to support different implementation. With that, the team decided it would be best for users to decide what that implementation looks like. We recommend

I have setup the React with react-router version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/categories ), but the content don't get updated (But if I do a refresh, it gets updated). Below is my setup: The Routes.js setup as follows: import { Switch, Route } from 'react-router-dom'; import React from 'react'; // Components import Categories from './containers/videos/Categories'; import Videos from './containers/videos/Videos'; import Home from './components/Home'; const routes = (

How can I move to using https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js from using https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js ? Example using 3.x below. HTML <script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script> JS let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter; history.replaceState(0,0,'/'); const