react-router#Route JavaScript Examples

The following examples show how to use react-router#Route. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: route.js    From choerodon-front-base with Apache License 2.0 6 votes vote down vote up
Index = ({ match }) => (
  <Switch>
    <PermissionRoute
      exact
      path={match.url}
      component={Content}
      service={(type) => service[type] || []}
    />
    <Route path="*" component={NoMatch} />
  </Switch>
)
Example #2
Source File: Layout.js    From sofia-react-template with MIT License 6 votes vote down vote up
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>
  );
}
Example #3
Source File: TopicsView.test.jsx    From frontend-app-discussions with GNU Affero General Public License v3.0 6 votes vote down vote up
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>,
  );
}
Example #4
Source File: AdminApp.jsx    From frontend with MIT License 6 votes vote down vote up
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>
  );
}
Example #5
Source File: routes.jsx    From howlongistheline.org with Mozilla Public License 2.0 6 votes vote down vote up
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>
)
Example #6
Source File: PostEditor.test.jsx    From frontend-app-discussions with GNU Affero General Public License v3.0 6 votes vote down vote up
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>,
  );
}
Example #7
Source File: Header.jsx    From howlongistheline.org with Mozilla Public License 2.0 6 votes vote down vote up
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>
    )
}
Example #8
Source File: ApiAuthorizationRoutes.js    From Confer with MIT License 6 votes vote down vote up
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>);
  }
Example #9
Source File: App.js    From create-magic-app with MIT License 6 votes vote down vote up
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>
  );
}
Example #10
Source File: App.js    From HexactaLabs-NetCore_React-Final with Apache License 2.0 6 votes vote down vote up
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>
)
Example #11
Source File: App.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up
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>
)
Example #12
Source File: App.js    From samples with MIT License 6 votes vote down vote up
render () {
    return (
        <MainPanel>
        <Route exact path='/' component={Home} />
            <Route path='/navigation' component={Navigation} />
            <Route path='/services' component={Services} />
        </MainPanel>
    );
  }
Example #13
Source File: App.js    From gitconvex with Apache License 2.0 6 votes vote down vote up
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>
  );
}
Example #14
Source File: App.js    From sofia-react-template with MIT License 6 votes vote down vote up
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>
  );
}
Example #15
Source File: index.js    From choerodon-front-base with Apache License 2.0 6 votes vote down vote up
Index = ({ match }) => (
  <Switch>
    <PermissionRoute
      exact
      path={match.url}
      component={ContentIndex}
      service={['choerodon.code.organization.manager.overview.ps.default']}
    />
    <Route path="*" component={NoMatch} />
  </Switch>
)
Example #16
Source File: CommentsView.test.jsx    From frontend-app-discussions with GNU Affero General Public License v3.0 6 votes vote down vote up
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>,
  );
}
Example #17
Source File: app-router.js    From albedo with MIT License 6 votes vote down vote up
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>
}
Example #18
Source File: renderRoutes.js    From the-eye-knows-the-garbage with MIT License 6 votes vote down vote up
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;
}
Example #19
Source File: index.js    From Registration-Login-and-CRUD-Action-using-MERN-stack with GNU General Public License v3.0 6 votes vote down vote up
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')
);
Example #20
Source File: App.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up
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>
)
Example #21
Source File: routes.js    From college-management-react with GNU General Public License v3.0 6 votes vote down vote up
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>
    );
  }
Example #22
Source File: react-router-config.js    From the-eye-knows-the-garbage with MIT License 6 votes vote down vote up
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;
}
Example #23
Source File: App.js    From foodrecipes with MIT License 6 votes vote down vote up
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>
  );
}
Example #24
Source File: App.js    From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 6 votes vote down vote up
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>
)
Example #25
Source File: BookingPage.js    From git-brunching with GNU General Public License v3.0 6 votes vote down vote up
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>
  );
}
Example #26
Source File: wallet-router.js    From albedo with MIT License 6 votes vote down vote up
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>
}
Example #27
Source File: App.js    From Lambda with MIT License 6 votes vote down vote up
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>
    );
  }
Example #28
Source File: liquidity-pools-router.js    From albedo with MIT License 6 votes vote down vote up
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>
}
Example #29
Source File: index.js    From Lambda with MIT License 6 votes vote down vote up
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
);