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>
Related
I've used React Router like below:
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={HomeComponent}/>
</Switch>
</BrowserRouter>
When I use this.props.history.push("/home") or http://localhost:3000/home page is Moving to Home page, but the url is still http://localhost:3000/.
Routing is working and I am able to navigate to all pages, but in the Top URL bar it is showing http://localhost:3000/ always.
Any Idea why this happens?
Please check whether u have implemented any createBrowserHistory, if its there please remove it (assuming it's an implementation issue).
Try adding the BrowserRouter to your index.js instead of adding in the inner component.
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#root'));
I have a problem with my dashboard that uses multiple user access. In the path "/" there is a default and generic dashboard; while in the other dashboard I have the custom users. I use Reactjs and this version of react-router-dom "react-router-dom": "^5.1.2":
<Router basename="/test">
<Switch>
<Route path="/" component={Dashboard} />
<Route path="/:username" component={Dashboard} />
</Switch>
</Router>
In my Dashboard components i have another router:
let { url } = useRouteMatch();
<Switch>
<Route exact path={`${url}`} component={Library} />
<Route path={`${url}/whish`} component={Wishlist} />
</Switch>
This doesn't work. I have these scenarios:
case A:
/test Generic Dashboard --> Library component
/test/whish Generic Wishlist --> Wishlist component
case B
/john John's Dashboard Library
/john/whish John's Dashboard Wishlist
/Sam Sam's Dashboard
/Sam/whish Sam's WhishList
There were a few issues in your sandbox.
You had missing imports
Your Dashboard component was using useRoutMatch to determine the nested paths. I would recommend checking for the existence of the username and modify your url based on that.
Your "La mia Libreria" link was just leading back to "/", which is the base url for the page. You either need to load this content already, or send it to a different url.
Your App.js had two Routes, one for a username and one without. This fails because, even with a username, your first route catches. You could reorder these so that the username Route is first, but a better solution is to use conditional parameters. You can see my solution in the functional sandbox below.
https://codesandbox.io/s/falling-fire-4xklm?file=/src/App.js
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
I have a simple App component with Links to a User index and a Cache index (for a geocaching app). My Links render fine, and when clicked they change the path in the address bar, but nothing changes in the DOM until I refresh the page, at which point the page looks the way it should. What's going on here, and what's the conventional way of dealing with it? I am using Redux as well, if that makes any difference. The following is all of the JSX returned by my App component:
<div>
<nav>
<Link to="/caches">Caches</Link>
<Link to="/users">Users</Link>
</nav>
<div>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" render={() => <div><UserList users={this.props.users}/></div>}/>
<Route path="/caches" component={CacheList}/>
</Switch>
</div>
</div>
Its a common issue with react-router-4.
use {pure: false} in react-redux connect or use withRouter HOC.
React router 4 does not update view on link, but does on refresh
I am using the following simple nav code
<Router>
<Switch>
<Route exact path='/dashboard' component={Dashboard} />
<Route path='/dashboard/accounts' component={AccountPage} />
</Switch>
</Router>
<NavLink exact to={'/dashboard'}
disabled={this.props.item.disabled}
activeClassName='active'>
<NavLink exact to={'/dashboard/accounts'}
disabled={this.props.item.disabled}
activeClassName='active'>
The URL changes but the view does not. It does however change when I refresh the page or manually go to that URL.
You can also use the:
import { withRouter } from 'react-router-dom';
And then on your export default, you do like this:
export default withRouter(connect(mapStateToProps, {})(Layout));
Because when you have an export connect, you need to tell that that component will be using the router.
This is because react-redux connect method implements shouldComponentUpdate which will cause component not to render when props didn't change. And this is conflicting now with react-router 4.
To avoid it you can pass {pure: false} to connect as described in react-redux troubleshooting section.
Another way is to use withRouter HOC or pass location prop like described in DOCS.
I had my Navlinks in a stateless-component (or dumb component) and a container to control the collapse-state of my navbar.
after switching the navbar-container from PureComponent to Componentit solved the problem for me.
I have encountered this problem. I resolve it by add attribute key to component Switch with value is a location pathname and location search.
Have you tried making sure that your router tags wrap the entire chunk of code?
<Router>
<Switch>
<Route exact path='/dashboard' component={Dashboard} />
<Route path='/dashboard/accounts' component={AccountPage} />
</Switch>
<NavLink exact to={'/dashboard'}
disabled={this.props.item.disabled}
activeClassName='active'>
<NavLink exact to={'/dashboard/accounts'}
disabled={this.props.item.disabled}
activeClassName='active'>
</Router>
It looks odd, but including links into the <Router> propagates your path change to router components when you click the link and actually renders the component you are routing to. Just fixed a very similar problem myself.