react-router-v4

In reference to the unresolved question (as a final conclusion) Multiple Nested Routes in react-router-dom v4 How to nest routes in React Router v4? I am also getting the same issue. https://reacttraining.com/react-router/web/guides/quick-start promotes react-router-dom Also, people find better to list down routes in one file rather inside components. Something referred: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config Something working (mostly): import * as React from 'react' import {BrowserRouter as Router, Route, Switch } from 'react-router-dom' export

I have this PrivateRoute component (from the docs): const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) I would like to change isAuthenticated to an aysnc request isAuthenticated() . However, before the response has returned the page redirects. To clarify, the isAuthenticated function is already set up. How can I wait for the async call to complete before deciding what to display? If you aren't using Redux or any other

I'm trying to use a router for my React application. I tried something I'd been using a while back, but can't seem to get it going. Has hashHistory been removed/reformatted in React Router v4? <Router history={hashHistory}> <Route path='/' component={MainContainer} /> </Router> Use a HashRouter . They got rid of individual histories such as browserHistory and hashHistory and instead replaced them with BrowserRouter and HashRouter components respectively in React Router v4: import { HashRouter } from 'react-router-dom'; <HashRouter> … </HashRouter> Note that HashRouter comes from react-router

I'm reading about static vs dynamic routing in React Router, and I'm struggling to identify the advantages of the latter (and why v4 chose to go with it). I can see the advantage of listing out all the routes for an application (static), as well as the component that each route maps to, allowing you to trace what would be rendered given a specific URL. But I'm not seeing any clear advantage to dynamic routes. If anything, I can only see disadvantages, because there is no clear way to see what state a URL will map to, without starting at the root app element and working your way through the

I'm learning React myself with online tutorial. So this is a basic example about using React Router: <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </Route> </Router> With my App component: class App extends React.Component { render() { return ( <div> <ul> <li><Link to="home">Home</Link></li> <li><Link to="about">About</Link></li> <li><Link to="contact">Contact</Link></li> </ul> {this.props.children} </div> ) } } export

The following route works great and displays the AdministratePage component: <Route path="/admin" component={AdministratePage} /> However this route: <Route path="/admin/all" component={AdministratePage} /> ...results in the following error: http://localhost:8080/admin/bundle.js 404 (Not Found) Where do I go wrong? Am I not allowed to use any path? I'm using react-router-dom 4.1.2. My webpack.config.js : output: { path: path.resolve('dist'), filename: '/bundle.js' }, My index.html: <div id="app"></div> Thank you. Slash looks useless here filename: '/bundle.js' Also try to define publicPath