反应路由器路径问题

Question

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>
    )

}

因此，在上述路由中，当我登录时，除了第一个路由器（即本地路由器）外，每个链接都转到最后一个路径（即错误）。请让我知道是否需要有关代码的更多详细信息。

Answer 1

我看到您正在尝试对未经授权的用户隐藏某些网址。如果这是您的目标，则可以使用Prive Route方法。您可以在此处找到所需的文章：

[https://medium.com/@thanhbinh.tran93/private-route-public-route-and-restricted-route-with-react-router-d50b27c15f5e][Link]