Ive been trying to develop a Web App using react and react-router-dom where the user clicks on a button on of my react routes. I would ideally like the user to be navigated to completely new page after clicking said button.
For reference I have a landing page where I have react router allow the user to switch between either a sign in or sign up form to be displayed on the page
<Router>
<NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link" >
Sign In </NavLink>
or
<NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign Up </NavLink>
<Route exact path="/" component={signUpForm}></Route>
<Route path="/sign-in" component={signInForm}></Route>
<Router>
^Ive left out some of my code but just left the parts regarding react-router
There are buttons on both sign in and sign up pages and I would like to figure out some way, either using react-router or any other method to be able to navigate from these routes as I attempted to use react router again inside of my signUpForm/signInForm files but soon found out you cannot use within a route.
Let me know if I need to clarify anything or provide more information.
Thanks in advance
If your signUpForm and signInForm components are properly defined and imported in the provided file the only thing you need now is to put these <Route .../> elements inside <Switch/> component. I think something like this would help:
<Router>
<NavLink to="/sign-in" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign In </NavLink>
or
<NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active"
className="FormTitle__Link" > Sign Up </NavLink>
<Switch>
<Route exact path="/" component={signUpForm}/>
<Route path="/sign-in" component={signInForm}/>
</Switch>
<Router>
Related
Hi every one I am trying create new page in react in this way.
I Have component which name is "SolutionsSectionsPic".
And I want after clicking on that component open another component (which name is "SItem" ) in new page (not in new tab). I am writing something like this
<Router>
<Link to="/ecommerce">
<SolutionsSectionsPic />
</Link>
<Route path="/ecommerce" component={SItem} />
</Router>
But when I click on "SolutionsSectionsPic" component, my "SItem" component immediately appears under "SolutionsSectionsPic" component.
How can I fix it?
This is because your Link will always be rendered no matter what. A solution to this is wapping your Link in a Route, that way it will only be rendered on that route.
<Router>
<Route path="/" exact>
<Link to="/ecommerce">
<SolutionsSectionsPic />
</Link>
</Route>
<Route path="/ecommerce" exact component={SItem} />
</Router>
You also see that I use exact, that means that only / will be valid, otherwise all routes that start with / will be valid.
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 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.
I am using material-ui in my django project. I have different components to show different contents.
There is a button in my home page. When a use click on that button, I am trying to route him to signup page.
This is my button:
<RaisedButton containerElement={<Link to="/signup" />}
label="GET STARTED" backgroundColor="#00BCD4"
labelColor="#ffffff" style=`{buttonStyle} />
And this is my router setting:
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="signup" component={SignUp} />
</Route>
</Router>), document.getElementById('app'));
The default page : http://127.0.0.1:8000/ is showing the index 'home' component but, when the user click the button, the not found page is opened from the django.
Did I miss anything to setup?
I was not able to reproduce your issue with the details you provided. You can look at the what I set up here: http://www.webpackbin.com/NJcI-Lbo-
I did notice that there a typo in your first code snippet (there is an unnecessary backtick). But I'm assuming that this was just a typo when entering into stackoverflow, as this shouldn't be causing the behavior you described.
style=`{buttonStyle}
It does not seem like this is related to <Link /> and <RaisedButton />. Instead, it sounds like there may be some configuration issue from your local web server's end.
Does going directly to http://127.0.0.1:8000/signup work?