react-router-dom#Route JavaScript Examples

DeckMode = ({
  children,
  extracted,
  keyboardTarget,
  touchTarget,
  slideNavigation = true,
  modeNavigation = true,
  ...props
}) => {
  const basepath = props.basepath ? props.basepath : '';
  const slides = React.Children.toArray(children);

  return (
    <HashRouter {...props}>
      <RootState mode={deckModes.NORMAL} basepath={basepath} extracted={extracted} slideLength={slides.length}>
        <Switch>
          <Redirect exact from="/" to={deckModes.properties[deckModes.NORMAL].path} />
          {
            deckModes.properties.map(({Component, name, path}) => (
              <Route path={`/${path}`} key={name}>
                <Component
                  keyboardTarget={keyboardTarget}
                  touchTarget={touchTarget}
                  slideNavigation={slideNavigation}
                  modeNavigation={modeNavigation}
                >
                  {slides}
                </Component>
              </Route>
            ))
          }
        </Switch>
      </RootState>
    </HashRouter>
  );
}

export default function Pool({ params }) {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  const AddLiquidityParams = () => <AddLiquidity params={params} />

  const RemoveLiquidityParams = () => <RemoveLiquidity params={params} />

  const CreateExchangeParams = () => <CreateExchange params={params} />

  return (
    <>
      <ModeSelector />
      {/* this Suspense is for route code-splitting */}
      <Suspense fallback={null}>
        <Switch>
          <Route exact strict path="/add-liquidity" component={AddLiquidityParams} />
          <Route exact strict path="/remove-liquidity" component={RemoveLiquidityParams} />
          <Route exact strict path="/create-exchange" component={CreateExchangeParams} />
          <Route
            path="/create-exchange/:tokenAddress"
            render={({ match }) => {
              return (
                <Redirect to={{ pathname: '/create-exchange', state: { tokenAddress: match.params.tokenAddress } }} />
              )
            }}
          />
          <Redirect to="/add-liquidity" />
        </Switch>
      </Suspense>
    </>
  )
}

App = () => {
   return (
      <Router>
         <Header />
         <main className="py-3">
            <Container>
               <Route exact path="/" component={HomePage} />
               <Route exact path="/books" component={BookListPage} />
               <Route exact path="/books/:id" component={BookPage} />
            </Container>
         </main>
         <Footer />
      </Router>
   );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path='/elements'>
          <Elements />
          
        </Route>
        <Route exact path='/contribute'>
          <Contribute />
          
        </Route>
        <Route exact path='/team'>
          <Team />
        </Route>
        <Route exact path='/'>
        <Home />
        </Route>
      </Switch>
    </Router>
  );
}

/**
 * Main container : this is the container of the whole page
 * @type {Function}
 * @returns {jsx} image container (in account overview and page container)
 * <MainContainer/>
 */
function MainContainer() {
  return (
    <div className="mainContainer" data-test="mainContainer">
      <Route
        data-test="ImageContainer"
        exact
        path={`/account/accountOverview`}
        component={ImageContainer}
      />

      <PageContainer data-test="PageContainer" />
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Nav />
        <div className="container">
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/products" component={Products} exact />
            <Route path="/products/:id" component={Product} />
            <Route path="/cart" component={Cart} />
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

OpenRoute = ({ component: Component, path, ...rest }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    if (path === '/lti-sso') return; // This route sets its own permissions

    dispatch({
      type: 'SET_ALL_PERSMISSION',
      payload: { loading: false },
    });
  });
  return (
    <Route
      path={path}
      exact
      render={(props) => <Component {...props} {...rest} />}
    />
  );
}

export default function App() {

  return (
    <div className="App">
      <Header />
      <Switch>
        {/* Build out a Private Route */}
        <Route exact path="/login" component={Login} />
      </Switch>
    </div>
  );
}

export function RightContent() {
  const { address } = useWallet();
  const { data: deployments, isFetching: isFetchingDeployments, refetch: getDeployments } = useDeploymentList(address, { enabled: false });
  const { data: leases, isFetching: isFetchingLeases, refetch: getLeases } = useAllLeases(address, { enabled: false });

  return (
    <>
      <Route exact path="/createDeployment/:step?/:dseq?">
        <CreateDeploymentWizard />
      </Route>
      <Route path="/deployment/:dseq">
        <DeploymentDetail deployments={deployments} />
      </Route>
      <Route exact path="/deployments">
        <DeploymentList deployments={deployments} refreshDeployments={getDeployments} isLoadingDeployments={isFetchingDeployments} />
      </Route>
      <Route path="/templates/:templateId">
        <TemplateDetails />
      </Route>
      <Route exact path="/templates">
        <TemplateGallery />
      </Route>
      <Route exact path="/providers">
        <Providers leases={leases} isLoadingLeases={isFetchingLeases} getLeases={getLeases} />
      </Route>
      <Route exact path="/providers/:owner">
        <ProviderDetail leases={leases} getLeases={getLeases} isLoadingLeases={isFetchingLeases} />
      </Route>
      <Route exact path="/settings">
        <Settings />
      </Route>
      <Route exact path="/">
        <Dashboard deployments={deployments} refreshDeployments={getDeployments} isLoadingDeployments={isFetchingDeployments} />
      </Route>
    </>
  );
}

function App() {
  return (
    <div style={{ fontFamily: "Avenir" }}>
      <Router>
        <AuthProvider>
          <Switch>
            <Route path="/chats" component={Chats} />
            <Route path="/" component={Login} />
          </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}

PublicRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      !isLoggedIn() ? (
        <Fragment>
          <WelcomeNavigationBar />
          <Component {...props} />
        </Fragment>
      ) : (
        <Redirect to={{ pathname: '/' }} />
      )
    }
  />
)

// const Pokedex = React.lazy(() => import("./pages/Pokedex"));
// const Home = React.lazy(() => import("./pages/Home"));
// const Pokemon = React.lazy(() => import("./pages/Pokemon"));

function App() {
  return (
    <BrowserRouter>
      <div style={{ backgroundColor: "#fff" }}>
        <Route path="/" exact component={Pokedex} />
        <Route path="/pokedex" exact component={Pokedex} />
        <Route path="/pokemon/:pokemonIndex" exact component={Pokemon} />
      </div>
    </BrowserRouter>
  );
}

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                  <Route path='/' exact component={Home}></Route>
                  <Route path='/login' component={Login}></Route>
                  <Route path='/signup' component={Signup}></Route>
                  <Route path='/doctor' component={Doctor}></Route>
                  <Route path='/patient' component={Patient}></Route>
                  <Route path='/LoginDoctor' component={LoginDoctor}></Route>
                  <Route path='/LoginPatient' component={LoginPatient}></Route>
                  <Route path='/SignupDoctor' component={SignupDoctor}></Route>
                  <Route path='/SignupPatient' component={SignupPatient}></Route>


                </Switch>



            </div>
        </Router>
    );
}

render(){
        return(
            <HashRouter basename = '/'>
                <>
                    <Navbar />
                </>
                <Route exact path={"/"} component={Galeria}/>
                <Route exact path={"/404"} component={Prox}/>
                <Route path ="/listasimple" component={ListaSimple}/>
                <Route path ="/listadoble" component={ListaDoble}/>
                <Route path ="/listacircularsimpleenlazada" component={ListaCircularSimple}/>
                <Route path ="/listacirculardobleenlazada" component={ListaCicularDoble}/>
                <Route path ="/pila" component={Pila}/>
                <Route path ="/cola" component={Cola}/>
                <Route path ="/coladeprioridad" component={ColaPriori}/>
                <Route path ="/burbuja" component={Burbuja}/>
                <Route path ="/seleccion" component={Seleccion}/>
                <Route path ="/insercion" component={Insercion}/>
                <Route path ="/rapido" component={Rapido}/>
                <Route path ="/abb" component={ABB}/>
                <Route path ="/avl" component={AVL}/>
                <Route path ="/arbolb" component={ArbolB}/>
                <Route path ="/arbolb+" component={ArbolBmas}/>
                <Route path ="/arbolmerkle" component={ArbolMerkle}/>
            </HashRouter>
        );
    }

function App() {
  return (
    <div className="App">
      <Router>
        <Route component={scrollRestoration} />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/address/:address" component={props => <Address {...props} key={Math.ceil(Math.random() * 10)}/>} />
          <Route path="/addresstx/:address" component={AddressTransaction} />
          <Route path="/blocks" exact component={Blocks} />
          <Route path="/block/:blocknum" component={props => <Block {...props} key={Math.ceil(Math.random() * 10)}/>} />
          <Route path="/transactions" exact component={Transactions} />
          <Route path="/tx/:txid" component={Transaction} />
          <Route path="/dev" exact component={Dev} />
          <Route path="/404" exact component={FourOhFour} />
          <Route component={Home} />
        </Switch>
      </Router>
    </div>
  );
}

render() {
    return (
      <div className="App">
        <Store.Container>
          <Router>
            <Switch>
              {/* / Path is dynamically changed depending on authenticated status */}
              <Route path="/:location/:id" component={this.state.isAuthenticated ? Mail : Home} />
              {/* Default fall-back path is dynamically changed depending on authenticated status */}
              <Route component={this.state.isAuthenticated ? Mail : Home} />
            </Switch>
          </Router>
        </Store.Container>
      </div>
    );
  }

App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Alert />
          <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/register' component={Register} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Route exact path='/board/:id' component={Board} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
}

TestingRouter = ({ ComponentWithRedirection, redirectUrl }) => (
  <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
    <Router history={history}>
      <Route
        path="/"
        exact={true}
        render={() => <ComponentWithRedirection />}
      />
      <Route
        path={redirectUrl}
        exact={true}
        render={() => <div>{redirectUrl}</div>}
      />
    </Router>
  </IntlProvider>
)

RefreshRoute = ({ component: Component, isDataAvailable, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isDataAvailable ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/",
          }}
        />
      )
    }
  />
)

NotLoggedInLayout = props => {
  const { component: Component, webId, ...rest } = props;
  const { t } = useTranslation();
  const ComponentWrapper = styled(Component)`
    padding-bottom: 60px;
    height: 100%;
    padding-top: 60px;
  `;
  return !webId ? (
    <Route
      {...rest}
      component={matchProps => (
        <Container>
          <NavBar
            {...matchProps}
            toolbar={[
              {
                component: () => <LanguageDropdown {...{ t, ...props }} />,
                id: 'language'
              }
            ]}
          />
          <ComponentWrapper {...matchProps} />
        </Container>
      )}
    />
  ) : (
    <Redirect to="/welcome" />
  );
}

function Main() {
  return (
    <main className={styles.main}>
      <Switch>
        {routes.map((item) => (
          <Route key={item.url} exact={!!item.exact} path={`/${item.url}`}>
            {item.component}
          </Route>
        ))}
      </Switch>
    </main>
  );

  // return (
  //   <main className={classes.main}>
  //     <Switch>
  //       <Route exact path="/">
  //         <KanbanBoard />
  //       </Route>
  //       <Route path="/about">
  //         <About text="About" />
  //       </Route>
  //       <Route path="/users">
  //         <Users />
  //       </Route>
  //     </Switch>
  //   </main>
  // );
}

function App() {
  return (
    <>
    <div className="App">
      <Router>
        <Navbar />

        <Switch>
          <Route path="/login" component={Login}/>
          <Route path="/Signup" component={Signup} />
          <Route path="/" component={Home} />
        </Switch>
      </Router>
     
    </div>
    <Footer/>
    </>
  );
  
}

render() {
    const { error, smart, patient } = this.props;
    return (
      <Router history={history}>
        <Helmet />
        <Container style={{ marginTop: '2rem' }}>
          <Grid columns="1" stackable>
            <Grid.Column>
              {error ? <ErrorMessage {...error} /> : null}
              {patient ? <SuccessMessage patient={patient} user={smart.user} /> : null}
              <Grid.Row>
                <Header as="h1">FHIR App Starter</Header>
                <Divider />
              </Grid.Row>

              <Grid.Row>
                <Information />
              </Grid.Row>

              <Grid.Row>
                <Divider />
              </Grid.Row>

              {smart ? (
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
              ) : null}
            </Grid.Column>
          </Grid>
        </Container>
      </Router>
    );
  }

render() {
    return (
      <div>
        <Router>
          <Route exact path="/" component={Main} />
          <Route exact path="/main" component={Main} />
          <Route exact path="/table/:name" component={Datasource} />
          <Route exact path="/form/course/:id" component={CourseForm} />
          <Route exact path="/form/group/:course/:number" component={GroupForm} />
          <Route exact path="/form/group/:course" component={GroupForm} />
          <Route
            exact
            path="/login"
            component={() => <Login app={this.props.app} />}
          />
          {!this.state.loggedIn ? <Redirect to="/login" /> : <div></div>}
        </Router>
      </div>
    );
  }

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}

render() {
    const {isLoggedIn} = this.props

    return (
      <Switch>
        {/* Routes placed here are available to all visitors */}
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        {isLoggedIn && (
          <Switch>
            {/* Routes placed here are only available after logging in */}
            <Route path="/home" component={UserHome} />
          </Switch>
        )}
        {/* Displays our Login component as a fallback */}
        <Route component={Login} />
      </Switch>
    )
  }

App = () => {
  return (
    <div className="App">
      <SnackbarProvider maxSnack={3}>
        <ThemeProvider theme={theme}>
          <Web3Provider
            render={(network) => (
              <div>
                <NarBar />
                <Route exact path="/Alternative-Uniswap-Interface/">
                  <CoinSwapper network={network} />
                </Route>

                <Route exact path="/Alternative-Uniswap-Interface/liquidity">
                  <Liquidity network={network} />
                </Route>
              </div>
            )}
          ></Web3Provider>
        </ThemeProvider>
      </SnackbarProvider>
    </div>
  );
}

function App() {
  const user = useContext(UserContext);

  if (!user.id) {
    return <Login />;
  }

  return (
    <SocketProvider id={user.id}>
      <NavBar />
      <Switch>
        <Route path="/" exact>
          <Rooms />
        </Route>
        <Route path="/game">
          <Box py={4}>
            <Game />
          </Box>
        </Route>
      </Switch>
    </SocketProvider>
  );
}

PrivateRoute = ({ component: Component, ...rest }) => {
	return (
		<Route
			{...rest}
			render={(props) =>
				localStorage.getItem('AUTH_TOKEN') ? (
					<Component {...props} />
				) : (
					<Redirect to='/' />
				)
			}
		/>
	);
}