React - How to do Dynamic Routing in React app

Question

I'm new to react and started working with basic routes, i have a serious doubt in routing.

I Have a 3 pages "Welcome.js" , "Signin.js, "Signup.js".
"Welcome.js" contains signin and signup button.
clicking on signin and signup button, it goes to its respective pages.
both the signin and signup pages contains a backbutton, onclicking on backbutton it goes to welcome.js page.
signin page contains text "if your a newuser go to signup" and signup page contains text "already a user, go to login". on clicking on that texts, it goes to corresponding pages.

so my problem is, if i click the "if your a newuser go to signup" and enters the signup page and pressing backbutton it goes to "welcome page". i want it to go to the signin page because the signup page comes from clicking the text from signin page.

kindly give me idea, so i can implement this routing in my future works.

tim · Accepted Answer · 2019-06-09 03:30:41Z

I will give you a basic example on how I use routing, perhaps this will help. First I have a src/routes folder that contains all of my routes. Inside this folder we have an src/routes/index.js which handles all of the routes.

class Routes extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" render={props => <Dashboard {...props} />} />
                    <Route path="/login" render={props => <Login {...props} />} />
                    <Route path="/register" render={props => <Register {...props} />} />
                </Switch>
            </BrowserRouter>
            )
        }
    }
export default Routes;

Then import all routes in src/App.js

import React, { Component } from 'react'
import Routes from './routes'; 

class App extends Component {
  render() {
    return (
      <div>
        <Routes />
      </div>
    )
  }
}

export default App;

Lastly in src/index.js to the dom

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

If you want to use a link in any one your pages simply

import { Link } from 'react-router-dom';

<Link to="/login">
  <Button type="button">
     Login
  </Button>
</Link>

react-router-dom even has a redirect....

import { Redirect } from 'react-router-dom';

var { redirect } = this.state;
   if(redirect) 
      return <Redirect to='/login' />

I hope this helps.

Tim, thanks for your solution. i will check it tomorrow and update you. thanks.

johnny peter · Accepted Answer · 2019-06-09 03:04:45Z

1

This should work for you. You can use React router and the withRouter hoc to get access to the history prop to push to other screens.

import { Router, Route, Switch, withRouter } from 'react-router';

const welcome = withRouter(({ history }) => {
  return (
    <>
      <button onClick={() => history.push('/signup')}>Signup</button>
      <button onClick={() => history.push('/sigin')}>SignIn</button>
    </>
  );
})

const signIn = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push('/signup')} />
  );
})

const signUp = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push('/signin')} />
  );
})

const App = () => {
  return (<Router history={history}>
    <Switch>
      <Route path="/welocome" component={welcome} />
      <Route path="/signin" component={signin} />
      <Route path="/signup" component={signup} />
    </Switch>
  </Router>);
}

answered Jun 9, 2019 at 3:04

johnny peter

4,8701 gold badge28 silver badges39 bronze badges

1 Comment

Arjun Pandi Over a year ago

Thanks Johnny peter, i will try this and say, in the meantime, can you spare a moment to share me a codepen or codesandbox link to the small demo of it? your help means a lot for me.

Collectives™ on Stack Overflow

React - How to do Dynamic Routing in React app

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related