How do I pass middleware to my router when using react router 4?
I'm sure I'm missing something obvious. Thanks!
Pretty standard react redux react-router set-up:
export default (
<Provider store={store}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home} /> {/* index route */}
<Route path="/question/" component={Question} />
</div>
</BrowserRouter>
</Provider>
);
Related
When a user clicks a link it will guide the user to a checkout page.
selectSlot(slot){
window.location = `/checkout/${slot.target.value}`
}
My approach won't keep the redux store values.
How can I keep those values?
Here are the router definitions
<Provider store={store}>
<ConnectedRouter history={history}>
<Router>
<Switch>
<Route exact path="/" component={MainLayout} />
<Route exact path="/index.html" component={MainLayout} />
<Route path="/checkout" component={CheckoutLayout} />
<Route component={NotFound}/>
</Switch>
</Router>
</ConnectedRouter>
</Provider>
I am using Link from react-router-dom for the purpose and works for me. You can read about it here
I'd like to render some routes with a nav at the top, while rendering other routes (like a sign-up / sign-in page) without any nav.
For the setup with the nav, I have:
const App = () => (
<Router>
<div>
<Nav />
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
I'm trying to find the best way of handling this with React Router (seems like it would have to handled with some type of conditional maybe? - "if my current route matches any one of these routes, then render like so else render this.").
Thanks!
You have at least two possibilities:
Use Route "path" property to test the route and render the component. Path property accepts path.to.regexp expressions.
Wrap your component with withRouter method and inside Nav test if the route matches and render null otherwise.
First answer:
const App = () => (
<Router>
<div>
<Route path="/(?!signin|signup)" component={Nav}/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
Second answer:
import { withRouter } from 'react-router'
const NavWithRouter = withRouter(Nav);
const App = () => (
<Router>
<div>
<NavWithRouter/>
<div>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/news" component={News} />
</div>
<Footer />
</div>
</Router>
);
<Route
path={`foo/(A|B|C)`}
component={() => (<Baz {...props}/>)}
/>
Where A,B,C are the different routes like foo/A.
I usually use two different Layout pages. And within the Layout pages, have a router for the content.
My code will look like this:
<Router>
<Route path="/login" component={AuthLayout} />
<Route path="/logout" component={AuthLayout} />
<Route path="/some/path" component={Layout} />
</Router>
Within each Layout, there will be the usual header / footer / navbars and then another set of routes.
<div className="auth-layout">
<header className="auth-layout__header"></header>
<main className="auth-layout__content">
<Switch>
<Route path="/login" component={Login} />
<Route path="/logout" component={Logout} />
</Switch>
</main>
</div>
In this way, I have a direct mapping from requirements to code. In my code, there are much more differences between the two layouts.
Just use a prop for this & inside the children your are able to conditional render the nav.
<Route exact path="/" render={() => <Home hasNav={false} />}
This is what my react-router code looks like
render((
<Router history={browserHistory}>
<Route path={CORP} component={App}>
<IndexRoute component={Home} />
<Route path={"outreach"} component={OutReach}/>
<Route path={"careers/m"} component={Career}/>
<Route path={"members"} component={Members}/>
<Redirect from="*" to={"/home"} />
</Route>
</Router>
), document.getElementById('app'))
But when I go to my page, I get this error in my console
Uncaught ReferenceError: Redirect is not defined
How do I tell react-router to redirect the user to the /home only when the user's destination does not match any of the route paths mentioned above?
You just need to add
import { Redirect } from 'react-router';
In the top of your file
The following code works:
import { BrowserRouter as Router, Route } from "react-router-dom";
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router>
<Route exact path="/" component={PostsIndex} />
</Router>
</Provider>
),
document.querySelector('#root')
);
But if I put the routes into a file routes.js, and
import routes from "./routes";
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router routes={routes} />
</Provider>
),
document.querySelector('#root')
);
and inside of routes.js:
export default (
<Route exact path="/" component={PostsIndex} />
);
Then it doesn't work. This worked before in react-router#2.0.0-rc5... so can we not use the form routes={routes} any more? How should it be done?
You can put routes inside Router
<Router>
{routes}
</Router>
I'm trying to set up some nested routes to add a common layout. Check the code out:
<Router>
<Route component={Layout}>
<div>
<Route path='/abc' component={ABC} />
<Route path='/xyz' component={XYZ} />
</div>
</Route>
</Router>
While this works perfectly fine, I still get the warning:
Warning: You should not use <Route component> and <Route children> in the same
route; will be ignored
CESCO's answer renders first the component AppShell then one of the components inside Switch. But these components are NOT going to render inside AppShell, they will NOT be children of AppShell.
In v4 to wrap components you don't put anymore your Routes inside another Route, you put your Routes directly inside a component.
I.E : for the wrapper instead of <Route component={Layout}> you directly use <Layout>.
Full code :
<Router>
<Layout>
<Route path='/abc' component={ABC} />
<Route path='/xyz' component={XYZ} />
</Layout>
</Router>
The change is probably explained by the idea to make React Router v4 to be pure
React so you only use React elements like with any other React element.
EDIT : I removed the Switch component as it's not useful here. See when it's useful here.
You need to use the switch component to nesting to work nice. Also, see this question
// main app
<div>
// not setting a path prop, makes this always render
<Route component={AppShell}/>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
<Route component={NoMatch}/>
</Switch>
</div>
And version-4 components do not take children, instead, you should use the render prop.
<Router>
<Route render={(props)=>{
return <div>Whatever</div>}>
</Route>
</Router>
Try:
<Router>
<Layout>
<Route path='/abc' component={ABC} />
<Route path='/xyz' component={XYZ} />
</Layout>
</Router>
If you do not want Layout to run at loaded. Use this method:
<div className="container">
<Route path="/main" component={ChatList}/>
<Switch>
<Route exact path="/" component={Start} />
<Route path="/main/single" component={SingleChat} />
<Route path="/main/group" component={GroupChat} />
<Route path="/login" component={Login} />
</Switch>
</div>
Whenever history changes, componentWillReceiveProps in the ChatList will run.
You can also try this :
<Route exact path="/Home"
render={props=>(
<div>
<Layout/>
<Archive/>
</div>
)}
/>