In the instance of using React Router to create routes that are associated with displaying specific components. Is the following an example of a way in which you could use React Router to have a nav bar displayed across all pages (including the home page) while also specifying only the '/' path to display the home component.
class App extends Component{
render(){
return (
<Router>
<div>
<Route exact path ='/' component={Home}/>
<Route path ='/' component={Nav}/>
</div>
</Router>
);
}
}
I'm attempting to learn about React Router and have not seen an example exploit this or specifically prohibit it. So I was wondering if there was a case that you could/should or could/should not use it.
Related
Suppose we have this situation:
<Routes>
<Route path="/" element={<Master/>}/>
<Route path="/login" element={<Auth/>}>
<Route path="" element={<AuthInitiate/>}/>
<Route path="callback" element={<AuthCallback/>}/>
</Route>
</Routes>
Suppose we currently are in /login/callback. Inside the AuthCallback component I use:
const navigate = useNavigate()
navigate("/")
The result is that i get redirected to /login, so I understand that the "/" refers to the relative subroute we are in (that is, /login). This is super useful in a lot of situations, but here I just to redirect with respect to the absolute path, so "/" should mean exactly / and not /login.
How should I do?
Be aware I'm referring to the new React Router v6.
EDIT: I had something else redirecting the route, the code instead works exactly as expected and navigate("/") from subroute indeed navigate to root level. There are no issues with navigation from subroutes, sorry.
Even though OP's problem is already resolved, I think it may be worth leaving this answer here for future travelers:
Use a leading slash to navigate to an absolute path:
const navigate = useNavigate();
// Absolute path:
navigate('/login/auth');
// Relative paths:
navigate('login');
navigate('login/auth');
navigate('../login');
Also noteworthy: In React Router v6 trailing slashes are ignored.
The docs say:
Route render methods The recommended method of rendering something
with a is to use children elements, as shown above. There are,
however, a few other methods you can use to render something with a
. These are provided mostly for supporting apps that were built
with earlier versions of the router before hooks were introduced.
function You should
use only one of these props on a given . See their explanations
below to understand the differences between them. Route props All
three render methods will be passed the same three route props match
location history
But if I render with the recommended way as so:
<Router>
<Route exact path="/">
<Home />
</Route>
</Router>
Can actually the Component Home to access the Route props (location, match and history)?
If so, how can these props be passed or arrive to the Home component?
I just found out about the react-router hooks:
https://reacttraining.com/react-router/web/api/Hooks
So it is just as simple as importing the useLocation hook and use it:
let location = useLocation();
My apologies!
I am really struggling with ChildRoutes in react-router and any help direction would be much appreciated.
I want to define my routes something in this manner.
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
The main problem is with Users. So when user hits /users I load all the users from API.
And when he navigates to users/1 , I would read the data from Users state by getting the userId from routeParams and the fetch details of user 1.
I want the Child Routes to work as say if someone pastes the URL /users/1 directly in the browser then the route would still load my Users component which will load all the users and the waterfall flow will continue.
Now here is my issue , the user detail is completely a new page in my app, so even though the router loads Users compoennt I want to navigate and render User component if my URL exactly matches the pattern /users/:userId. I am not sure how I can achieve this with react-router v3.0.4 . So happy path is first component Users get loaded and then when user is clicked the path changes to users/:userId and the User Component renders.
But the complicated path is when someone loads users/:userId directly in the browser the Users component should get mounted and then based on the location.path the User component should get rendered.
Again Any help with this would be much appreciated.
Thanks
Why don't you create a parent component User that loads the data on entry, then put UserProfile (or whatever this is loading) as a child component... it would look something like this:
import React, { Component } from 'react';
const mapDispatchToProps = {
getDate: someAction.getData
}
#connect(state => state, mapDispatchToProps);
export default class User extends Component {
componentWillMount() { ...loadData }
render() { return {...this.props.children} }
}
Then in your routes
<Route path="users" component={Users}>
<Route path="user" component={User}>
<Route path="/:id" component={UserProfile} />
</Route>
</Route>
I could have gone in more detail here, but I think I explain the general concept. Let me know how it goes!
Using this method you can guarantee data is loaded every time.
I'm trying to implement minimal routing in my create-react-app using react-router-redux . Documentation indicates that, if not using create-react-app, one needs to configure Webpack in order for the url refresh to work as expected (a setting related to 'history fall back'), but if using create-react-app this should automatically work. However, in my development environment, url refresh is not working as expected. Details: if the second route's url is current in the browser when I do a page refresh, then the second route is re-loaded, while I would have expected the main route (with path "/") would load instead. My index.js includes the following:
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={MyHomeComponent} />
<Route exact path="/roster" component={Roster} />
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
)
Could this be a documentation bug, or am I forgetting something in my code? Suggestions are very much appreciated.
A refresh should maintain the same pathname, not reset to root.
I'm not sure why you would want to go to the root on refresh, but the way that you would accomplish that would be to manually navigate when your application is loading.
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
history.replace('/')
ReactDOM.render((
<Provider>
<ConnectedRouter history={history}>
...
</ConnectedRouter>
</Provider>
), holder)
I'm using React Router v4 and using BrowserRouter.
This screenshot here shows that BrowserRouter's props have an action="POP".
However, when my route is matched as in the screenshot above, RegisterMatch or MatchProvider are not receiving the action, history, etc. via props.
I see via https://github.com/ReactTraining/react-router/blob/v4/website/components/FakeBrowser/index.js#L96 that there might need to be an injection of these props, but I'm not able to make sense of it or make it work.
Using <Router /> with a history prop or <BrowserRouter /> with a basename prop solves this.
e.g. <Router history={history}>
<BrowserRouter> ignores the history prop. To use a custom history, ' +
'use import { Router } instead of import { BrowserRouter as Router }.