#

React Routing

 

React: Route URL

Ankommende URL über Webrequest.URL

dieURL Pfade werden in der App.js im render() Block eingetragen

 

<Route exact path='/' component={Home} />

        <Route path='/counter' component={Counter} />

        <Route path='/shoppinglist' component={Shoppinglist} />

        <AuthorizeRoute path='/fetch-data' component={FetchData} />

        <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />

 

 

 

Route als Link erzeugen:

ActiveRoute, abgehende URL

In der Componente: Navbar wird der Pfad über <NavLink to="/subpage" >Menuitem eingetragen

 

<Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>

          <Container>

            <NavbarBrand tag={Link} to="/">React01</NavbarBrand>

            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />

            <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>

              <ul className="navbar-nav flex-grow">

              <NavItem>

                  <NavLink tag={Link} className="text-dark" to="/shoppinglist">Shoppinglist</NavLink>

                </NavItem>

                <NavItem>

                  <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>

                </NavItem>

                <NavItem>

                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>

                </NavItem>

                <NavItem>

                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>

                </NavItem>

                <LoginMenu>

                </LoginMenu>

              </ul>

            </Collapse>

          </Container>

        </Navbar>

 

 

Mobile

.

soap2day