Проблема с реакцией-маршрутизатором - PullRequest
Новая
       24

Проблема с реакцией-маршрутизатором

0 голосов
/ 08 мая 2020

React-Router не работает должным образом. Ниже приведен код. скажите, пожалуйста, в чем проблема. Ссылка на красивую статью была бы полезна. 

import React from 'react';
import {BrowserRouter, Switch, Route, Redirect, withRouter} from 'react-router-dom';
import Auth from './admin/Auth';
import Home from './components/Home';
import MainNavigation from './header/MainNavigation';
import AddProduct from './components/AddProduct';
import UserProducts from './components/UserProducts';
import ProductDetails from './components/ProductDetails';
import UpdatePlace from './components/UpdatePlace';
import Cart from './components/Cart';
import Orders from './Orders/Orders';
import Invoice from './Orders/Invoice';
import Reset from './admin/Reset';
import ResetPassword from './admin/ResetPassword';
import Checkout from './Orders/Checkout';
import './App.css';
import Error404 from './Error/Error404';

function App() {
  let routes;

  const storedData = JSON.parse(localStorage.getItem('userData'));

  if(storedData) {
    console.log(storedData);
    routes = (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/add-product" component={AddProduct}/>
        <Route exact path="/cart" component={Cart} />
        <Route exact path="/user-products/:id" component={UserProducts}/>
        <Route exact path="/prod-details/:pid" component={ProductDetails}/>
        <Route exact path="/edit-product/:id" component={UpdatePlace}/>
        <Route exact path="/reset/:token" component={ResetPassword}/>
        <Route exact path="/reset" component={Reset}/>
        <Route exact path="/orders/:id" component={Invoice}/>
        <Route exact path="/orders" component={Orders}/>
        <Route exact path="/checkout" component={Checkout}/>
        <Route path="*" component={Error404} />
      </Switch>
    );
  } else {
    routes = (
      <Switch>
        <Route path="/auth" exact component={Auth}/>
        <Route path="/" exact component={Home} />
        <Route path="*" exact component={Error404} />
      </Switch>
    );
  }
  let auth = null;
  if(!storedData) {
      auth = <Redirect to="/auth" />  
  }
  return (
      <div className="App">
        <BrowserRouter>
          {auth}
          <MainNavigation />
            {routes}
        </BrowserRouter>
      </div>
  );
}

export default App;

Это часть ссылок. 

return (
        <ul className={Style.nav}>
            {!storedData &&
                <li>
                    <NavLink to="/auth" activeClassName={Style.active}>Auth</NavLink>
                </li>
            }
            {storedData && 
                <li>
                    <NavLink to="/cart" activeClassName={Style.active}>Cart</NavLink>
                </li>
            }
            {storedData && 
                <li>
                    <NavLink to={`/user-products/${props.userId}`} 
                    activeClassName={Style.active}>My Products</NavLink>
                </li>
            }
            {storedData && 
                <li>
                    <NavLink to="/add-product" activeClassName={Style.active}>Add Product</NavLink>
                </li>
            }
            {storedData && 
                <li>
                    <NavLink to="/orders" activeClassName={Style.active}>Orders</NavLink>
                </li>
            }
            {storedData && 
                <li>
                    <NavLink to="/auth" onClick={logout} activeClassName={Style.active}>Logout</NavLink>
                </li>
            }
        </ul>
    )

}

Итак, в приведенных выше маршрутах, когда я вхожу в систему, кроме первого маршрутизатора, т.е. дома каждый ссылка идет на последний путь, т.е. ошибка. пожалуйста, дайте мне знать, если вам потребуется более подробная информация о коде.

...