react-router#Route JavaScript Examples

Index = ({ match }) => (
  <Switch>
    <PermissionRoute
      exact
      path={match.url}
      component={Content}
      service={(type) => service[type] || []}
    />
    <Route path="*" component={NoMatch} />
  </Switch>
)

Layout = (props) => {
  return (
    <div className={s.root}>
      <div className={s.wrap}>
        <Header />
        <Sidebar />
        <main className={s.content}>
          <Breadcrumbs url={props.location.pathname} />
          <Switch>
            <Route path="/template" exact render={() => <Redirect to="template/dashboard"/>} />
            <Route path="/template/dashboard" exact component={Dashboard}/>
            <Route path="/template/typography" exact component={Typography} />
            <Route path="/template/tables" exact component={Tables} />
            <Route path="/template/notifications" exact component={Notifications} />
            <Route path="/template/ui-elements" exact render={() => <Redirect to={"/template/ui-elements/charts"} />} />
            <Route path="/template/ui-elements/charts" exact component={Charts} />
            <Route path="/template/ui-elements/icons" exact component={Icons} />
            <Route path="/template/ui-elements/maps" exact component={Maps} />
            <Route path='*' exact render={() => <Redirect to="/error" />} />
          </Switch>
        </main>
        <Footer />
      </div>
    </div>
  );
}

function renderComponent() {
  render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <DiscussionContext.Provider value={{ courseId }}>
          <MemoryRouter initialEntries={[`/${courseId}/topics/`]}>
            <Route path="/:courseId/topics/">
              <TopicsView />
            </Route>
            <Route path="/:courseId/category/:category">
              <TopicsView />
            </Route>
            <Route
              render={({ location }) => {
                lastLocation = location;
                return null;
              }}
            />
          </MemoryRouter>
        </DiscussionContext.Provider>
      </AppProvider>
    </IntlProvider>,
  );
}

AdminApp = () => {
  const classes = useStyles();
  return (
    <Box display="flex" width={1} height="100%">
      <CssBaseline />
      <Drawer
        open
        variant="persistent"
        classes={{ paper: classes.drawer }}
        PaperProps={{ elevation: 4 }}
      >
        <Box className={classes.logo} display="flex" alignItems="center">
          <NavLink to="/">{logo}</NavLink>
        </Box>
        <AdminNavigation />
      </Drawer>
      <Box width={1} className={classes.main}>
        <AppBar position="relative" elevation={2}>
          <Toolbar />
        </AppBar>
        <Container className={classes.content}>
          <Box mt={2}>
            <Switch>
              <Route path="/admin/dashboard" component={DashboardPage} />
              <Route path="/admin/applications" component={ApplicationPage} />
            </Switch>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}

renderRoutes = () => (
  // <Provider store={store}>
    <Router history={browserHistory}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
    <CookiesProvider>
    <ToastContainer />
      <Switch>
        <Route exact path="/" component={Nearme} />
        <Route exact path="/addLine" component={AddLine} />
        <Route exact path="/editLine" component={EditLine} />
        <Route exact path="/shopDetails" component={ShopDetails} />
        <Route exact path="/feedback" component={FeedBack} />
        <Route exact path="/FAQ" component={faq} />
        <Route exact path="/learntocode" component={learntocode} />
        <Route exact path="/duplicated" component={duplicated} />
        <Route exact path="/stocks" component={Stocks} />
        <Route exact path="/editLocation" component={EditLocation} />
      </Switch>
      </CookiesProvider>
      </MuiPickersUtilsProvider>
    </Router>

  // </Provider>
)

async function renderComponent(editExisting = false, location = `/${courseId}/posts/`) {
  const path = editExisting ? Routes.POSTS.EDIT_POST : Routes.POSTS.NEW_POSTS;
  await render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <MemoryRouter initialEntries={[location]}>
          <Route path={path}>
            <PostEditor editExisting={editExisting} />
          </Route>
        </MemoryRouter>
      </AppProvider>
    </IntlProvider>,
  );
}

function Header({ show, history }) {
    return (
        <Toolbar>
            <div className="left" style={{ display: 'flex', alignItems: 'center', fontSize: '1.25em', fontWeight: 'bold' }}>
                <Route render={({ history }) => (
                    <img src='/images/logo.png' onClick={() => { history.push('/') }} style={{ height: "40px", maxWidth: "100%", padding: "0 15px" }}></img>
                )} />
                How Long is the Line?
            </div>
            <div className="right">
                <ToolbarButton onClick={show}>
                    <Icon icon="bars" />
                </ToolbarButton>
            </div>
        </Toolbar>
    )
}

render () {
    return(
      <Fragment>
          <Route path={ApplicationPaths.Login} render={() => loginAction(LoginActions.Login)} />
          <Route path={ApplicationPaths.LoginFailed} render={() => loginAction(LoginActions.LoginFailed)} />
          <Route path={ApplicationPaths.LoginCallback} render={() => loginAction(LoginActions.LoginCallback)} />
          <Route path={ApplicationPaths.Profile} render={() => loginAction(LoginActions.Profile)} />
          <Route path={ApplicationPaths.Register} render={() => loginAction(LoginActions.Register)} />
          <Route path={ApplicationPaths.LogOut} render={() => logoutAction(LogoutActions.Logout)} />
          <Route path={ApplicationPaths.LogOutCallback} render={() => logoutAction(LogoutActions.LogoutCallback)} />
          <Route path={ApplicationPaths.LoggedOut} render={() => logoutAction(LogoutActions.LoggedOut)} />
      </Fragment>);
  }

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route path="/login" exact>
            <Login />
          </Route>

          <Route path="/callback" exact>
            <Callback />
          </Route>

          <Route path="*">
            <Profile />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/product" component={ProductPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/product-type" component={ProductTypePage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)

App = (props) => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/producttypes" component={ProductTypes} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)

render () {
    return (
        <MainPanel>
        <Route exact path='/' component={Home} />
            <Route path='/navigation' component={Navigation} />
            <Route path='/services' component={Services} />
        </MainPanel>
    );
  }

export default function App(props) {
  const initialState = {
    hcParams: {},
    presentRepo: [],
    modifiedGitFiles: [],
    globalRepoId: "",
    gitUntrackedFiles: [],
    gitTrackedFiles: [],
  };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className="App w-full h-full overflow-hidden">
      <ContextProvider.Provider value={{ state, dispatch }}>
        <BrowserRouter>
          <Switch>
            <Route path="/" exact component={SplashScreen}></Route>
            <Route path="/dashboard" component={Dashboard}></Route>
            <Route
              path="/dashboard/repository"
              exact
              component={Dashboard}
            ></Route>
            <Route path="/dashboard/repository/*" component={Dashboard}></Route>
          </Switch>
        </BrowserRouter>
      </ContextProvider.Provider>
    </div>
  );
}

App = (props) => {
  return (
    <div>
      <ToastContainer/>
      <HashRouter>
        <Switch>
          <Route path="/" exact render={() => <Redirect to="/template/dashboard" />} />
          <Route path="/template" exact render={() => <Redirect to="/template/dashboard"/>}/>
          <PrivateRoute path="/template" dispatch={props.dispatch} component={LayoutComponent} />
          <Route path="/login" exact component={Login} />
          <Route path="/error" exact component={ErrorPage} />
          <Route path="/register" exact component={Register} />
          <Route component={ErrorPage}/>
          <Route path='*' exact={true} render={() => <Redirect to="/error" />} />
        </Switch>
      </HashRouter>
    </div>
  );
}

Index = ({ match }) => (
  <Switch>
    <PermissionRoute
      exact
      path={match.url}
      component={ContentIndex}
      service={['choerodon.code.organization.manager.overview.ps.default']}
    />
    <Route path="*" component={NoMatch} />
  </Switch>
)

function renderComponent(postId) {
  render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
          <DiscussionContent />
          <Route
            path="*"
            render={({ location }) => {
              testLocation = location;
              return null;
            }}
          />
        </MemoryRouter>
      </AppProvider>
    </IntlProvider>,
  );
}

export default function AppRouter({history}) {
    return <Layout>
        <Router history={history}>
            <CatcherView>
                <Switch>
                    <Route path="/playground">
                        <DynamicModule load={() => import(/* webpackChunkName: "playground" */ './demo/demo-view')}
                                       moduleKey="playground"/></Route>
                    <Route path="/wallet">
                        <DynamicModule load={() => import(/* webpackChunkName: "wallet" */ './wallet/wallet-router')}
                                       moduleKey="wallet"/></Route>
                    <Route path="/login" component={Login}/>
                    <Route path="/import" component={ImportAccount}/>
                    <Route path="/signup" component={CreateAccount}/>
                    <Route path="/confirm" component={Intent}/>
                    <Route path="/result" component={TxResultView}/>
                    <Route path="/account" component={AccountDashboard}/>
                    <Route path="/extension" component={AccountDashboard}/>
                    <Route path="/account-settings" component={AccountSettings}/>
                    <Route path="/blocked" component={BlockedPageView}/>
                    <Route path="/install-extension" component={InstallExtensionView}/>
                    <Route path="/web-stellar-handler" component={WebStellarLinkHandler}/>
                    <Route path="/" exact component={IntroView}/>
                    <Route component={NotFound}/>
                </Switch>
            </CatcherView>
        </Router>
    </Layout>
}

function renderRoutes(routes, extraProps = {}, switchProps = {}) {
  return routes ? (
    <Switch {...switchProps}>
      {routes.map((route, i) => (
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props =>
            route.render ? (
              route.render({ ...props, ...extraProps, route: route })
            ) : (
              <route.component {...props} {...extraProps} route={route} />
            )
          }
        />
      ))}
    </Switch>
  ) : null;
}

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Login} />
            <Route exact path='/register' component={Register} />
            <Route path='/dashboard' component={Dashboard} />
            {/* <Route component={NotFound}/> */}
        </Switch>
    </BrowserRouter>,
    document.getElementById('root')
);

App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)

render() {
    return (
      <Switch>
        <Fragment>
          <Paper>
            <div className="main-cointainer">
              <Route exact path="/login" component={Login} />
              <PrivateRoute exact path="/" component={Home} />
              <PrivateRoute exact path="/profile" component={Profile} />
              <PrivateRoute exact path="/users/:id" component={UserEdit} roles={["ADMIN"]}/>
              <PrivateRoute exact path="/users" component={UserList} roles={["ADMIN"]}/>
              
              {/* CUSTOM VIEWS */}

              <PrivateRoute exact path="/home" component={Home} />

              {/* START MY VIEWS */}

              <PrivateRoute exact path="/courses/:id" component={ CourseEdit }  />
              <PrivateRoute exact path="/courses" component={ CourseList }  />
              <PrivateRoute exact path="/exams/:id" component={ ExamEdit }  />
              <PrivateRoute exact path="/exams" component={ ExamList }  />
              <PrivateRoute exact path="/students/:id" component={ StudentEdit }  />
              <PrivateRoute exact path="/students" component={ StudentList }  />
              <PrivateRoute exact path="/teachers/:id" component={ TeacherEdit }  />
              <PrivateRoute exact path="/teachers" component={ TeacherList }  />

             {/* END MY VIEWS */}

            </div>
          </Paper>
        </Fragment>
      </Switch>
    );
  }

function renderRoutes(routes, extraProps, switchProps) {
  if (extraProps === void 0) {
    extraProps = {};
  }

  if (switchProps === void 0) {
    switchProps = {};
  }

  return routes ? React.createElement(Switch, switchProps, routes.map(function (route, i) {
    return React.createElement(Route, {
      key: route.key || i,
      path: route.path,
      exact: route.exact,
      strict: route.strict,
      render: function render(props) {
        return route.render ? route.render(_extends({}, props, {}, extraProps, {
          route: route
        })) : React.createElement(route.component, _extends({}, props, extraProps, {
          route: route
        }));
      }
    });
  })) : null;
}

function App() {
  return (
    <div className="App">
      <Navbar />
      <div className="container">
        <Route exact path="/" component={HomePage} />
        <Route exact path="/feature" component={FeaturePage} />
        <Route exact path="/signup" component={SignUp} />
      </div>
      <Footer />
    </div>
  );
}

App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/product-type" component={ProductTypePage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)

BookingPage = (props) => {
  const memoryHistory = createMemoryHistory();
  const history = useHistory();
  const { selected } = props;


  return (
    <div className={style.container}>
      {selected == null ? <NotFound />
        : (
          <div className={style.contentContainer}>
            {/* A surrounding div for styling purposes */}
            <div className={style.headerContainer}>
              <div className={style.header}>
                <div
                  className={style.logo}
                  onClick={() => { if (window.confirm('Are you sure you want to leave before booking? Progress will not be saved'))changePath("/", history)}}
                >
                  <Logo />
                </div>
                <h1 className={style.restaurantName}>{selected.Name}</h1>
              </div>
            </div>
            {/* Memory is used to navigate as we don't want to change URL each time */}
            <Router history={memoryHistory}>
              <Switch>
                <Route path="/details" component={() => <ContentContainer type="detail" />} />
                <Route path="/confirmation" component={() => <ContentContainer type="confirmation" />} />
                <Route path="/complete" component={() => <ConfirmedBooking history={history} />} />
                <Route path="/" component={() => <ContentContainer type="time" mainHistory={history} />} />
              </Switch>
            </Router>
          </div>
        )}

    </div>
  );
}

export default function WalletRouter() {
    const {path} = useRouteMatch()
    return <AccountContextView>
        <Switch>
            <Route path={`${path}/swap`} component={SwapView}/>
            <Route path={`${path}/transfer`} component={TransferView}/>
            <Route path={`${path}/add-trustline`} component={AddTrustlineView}/>
            <Route path={`${path}/liquidity-pool`} component={LiquidityPoolsRouter}/>
            <Route component={NotFound}/>
        </Switch>
    </AccountContextView>
}

render() {
    return (
      <div className="app">
        <Header />

        <Route exact path="/" component={Home} />
        <Route
          path="/list"
          component={() => {
            return (
              <ListPage
                items={this.props.items}
                addItem={(text) => this.handleAddItem(text)}
              />
            );
          }}
        />
      </div>
    );
  }

export default function LiquidityPoolsRouter() {
    const {path} = useRouteMatch()
    return <Switch>
        <Route path={`${path}/deposit`} component={DepositView}/>
        <Route path={`${path}/withdraw`} component={WithdrawView}/>
        <Route path={`${path}`} exact component={LiquidityPoolView}/>
        <Route component={NotFound}/>
    </Switch>
}

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRedirect to="/home" />
      <Route path="home" component={Home} />

      <Route path="button" component={ButtonVisual} />
      <Route path="nav-item" component={NavItemVisual} />
      <Route path="menu-item" component={MenuItemVisual} />
      <Route path="list-group-item" component={ListGroupItemVisual} />
    </Route>
  </Router>,
  mountNode
);