Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register
React ;

React Routing

12.02.2021 (👁5083)


 

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>