In my React project, I have:
A Login component without header & sidebar components login image
A Dashboard component with a header, a footer and other child components that all render within the dashboard component dashboard image
An Error page component
Question:
How should I construct my router to start from the login page and when I click on login, the router takes me to the dashboard?
I can point you to a nice medium article that also helped me to understand react routing.
https://medium.com/#pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
For an example what i would do is
<Route path="/" component={LoginPage} />
<Route exact path="/dashboard" component={DashboardComponent} />
<Route path="/dashboard/something" component={AnotherComponent} />
Then inside that DashboardComponent you can add your header and sidebar. And also other components.
If you need routes like
/dashboard/some_other_thing
You have to define the relevent inside the DashboardComponent
Related
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="update-profile" element={<UpdateProfileForm />} />
<Route path="bookmarks" element={<Bookmarks />} />
</Route>
I have my routes setup like this, but i want all the child routes of dashboard to render under the same path without actually routing to the child routes
Example: The index route is dashboard Home component and it renders in /dashboard path
I want update-profile, bookmarks to render under /dashboard path .Not like switching to /dashboard/update-profile path in the browser.
If i click bookmarks in my dashboard navbar it should render the Bookmarks component but my path should be /dashboard in the browser itself, for now it is routing to the /dashboard/bookmarks.
How to overcome this?
As far as, I have understood you question, You just need to configure the parent component in routing. All the child components need not to be configured in the routing.
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
</Route>
The child components can be imported inside the parent component and used inside the parent component itself like below,
DashboardHome.jsx
import 'Bookmarkscomponent' from Bookmarkscomponent.jsx
import 'Slidercomponent' from Slidercomponent.jsx
export default function DashboardHome() {
return (
<>
<Slidercomponent />
<Bookmarkscomponent />
</>
)
}
Also, If you want to render the same /dashboard when you click the Bookmark. Then you can configure the same route in the link like below,
<Link to="/dashboard">Bookmark</Link>
when i click on order button i wanna go to a new page instead o staying on Buying form component and adding orderComplited component down of it
BuyForm.js
App.js
orderCompleted
The issue is that you are rendering your OrderCompleted route as a nested route with the Outlet being rendered by the BuyForm route.
<Route path="order" element={<BuyForm />}>
<Route path="orderCompleted" element={<OrderCompleted />} />
</Route>
The BuyForm component is a layout component. This means the BuyForm component remains on the screen rendered while subroutes are also matched and rendered.
To resolve you should refactor the code a bit. Move the BuyForm component into its own route which will be designated as the index route to be matched and rendered when the layout Route components path matches. Remove the Outlet from BuyForm, one will be rendered by default now by the wrapping Route. Now both the BuyFormandOrderCompletedroutes will be rendered into theOutlet, one at-a-time, when their path`s match.
<Route path="order">
<Route index element={<BuyForm />} />
<Route path="orderCompleted" element={<OrderCompleted />} />
</Route>
I have in my app two dashboards. One for admin and an other for teacher.
My question is the next,
How can i redirect on to a component and the other in the other component ? if you have an example of code it's better ahahah.
I'm a beginner in this domain.
Thanks for your help.
you can use BrowserRouter if you're using react router v4 and implement your app navigation like this:
<BrowserRouter>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/teacher" component={Teacher} />
</Switch>
</BrowserRouter>
Hence your corresponding components will be rendered. I hope this made all clear.
you just need to create a link that redirect to other component home page
<a href={{route('teacher dashboard route name)}}>Teacher Dashboard</a>
<a href={{route('admin dashboard route name)}}>Admin Dashboard</a>
I'm having a weird bug with nested routes in react-router that I'm struggling to fix.
I have two components where I have multiple routes in them. One is a settings component and the other is a profile component. In my settings component things work perfectly fine.
I have three files in my component folder (index.js, editprofile.js, and password.js). I import the components in my index file. Then render them like this.
index.js // settings component
...html that renders across all routes
<Route path="/account/settings" exact component={EditProfile} />
<Route path="/account/settings/password" component={Password} />
This works as planned. On /account/settings the edit profile component renders and when I link to /account/settings/password the password component appears and the edit profile component is gone.
Now the bug I have is when I try to do the same exact thing in my profile component. I have similar file structure in my profile component (index.js, timeline.js, followers.js, following.js...). I import them into my index.js and render them in the component like this.
index.js // profile component
...html that renders across all routes
<Route path="/:username" exact component={Timeline} />
<Route path="/:username/followers" component={Followers} />
...other <Route />'s
This loads the Timeline component correctly but when I link to any other routes it loads a blank page. As an alternative I tried to edit the path like below:
<Route path={{pathname: '/' + this.props.user.Username}} exact component={Timeline} />
<Route path={{pathname: '/' + this.props.user.Username + '/followers'}} component={Followers} />
And this resulted in the followers component being rendered on what should be /:username and the blank page rendering on /:username/followers.
Any idea's as to why this process doesn't work with my profile component but works fine with settings component?
Edit** A third alternative I tried was to put the match.params into the pathname. Eg.
<Route path={{ pathname: this.props.match.params.username }} component={Timeline} />
<Route path={{ pathname: this.props.match.params.username + '/followers' }} component={Followers} />
This gave me a similar result as one prior.
The problem is the <Route path="/:username" exact component={Timeline} /> will match more routes than you assume.
E.g., it'll match:
/about // username = about
/followers // username = followers
and so on. You'd need to make it more specific or declare it as the last route.
I am building an external React component/module that has many sublevels/pages and routes. I am using React Router V4. This component will be imported into a host application that itself has it's own routing system. The host app is also using React Router V4.
The component's root view is a grid view of cards and when the user click one of the cards it brings them to a detail view of the card. When the user is on a detail view, the url in the browser should change so that a user can bookmark the url of that page and visit that page later.
How should the routing work between the host application and the component? Should the host app pass in the route schema into the component or should the component and host app have it's own separate routing system. Does anyone have any examples of this?
React Router V4 plays very nicely in this situation. Both apps would need their own top level Router component in order to be able to run standalone. But you could organize the code so you can reuse the main switch statement for the SubModule. The urls on the host application would all be prefixed with /subModule/, i.e. /subModule/foo, and they would just be /foo on the subModule standalone application.
HostApp.jsx
<Router>
<Switch>
<Route path="/other" component={Other} />
<Route path="/subModule" component={SubModuleRouter} />
</Switch>
</Router>
SubModule.jsx
<Router>
<Route path="/" component={SubModuleRouter} />
</Router>
SubModuleRouter.jsx
<Switch>
<Route exact path="/foo" component={FooComponent} />
</Switch>