时间戳

首页 > 解决方案 > 如何在反应中显示当前的url路径？

reactjs - 如何在反应中显示当前的url路径？

问题描述

如何在反应中显示当前路径，当我单击显示正确的汽车菜单并且单击第二个菜单后电子显示汽车菜单不起作用时。您能否仅检查类别组件。

我附上了下面的代码和屏幕截图。你能检查一下这张图片吗？

在此处输入图像描述 应用程序.js：

    // import logo from './logo.svg';
    import './App.css';
    import { BrowserRouter, Switch, Route,useLocation } from 'react-router-dom';
    import CustomerReview from './StoreComponent/CustomerReview';
    import Related from './StoreComponent/Related';
    import Store from './StoreComponent/Store';
    import CategoriesList from './ComponentList/CategoriesList';
    import StoreDetails from './StoreComponent/StoreDetails';
    // import styles from './Owl.theme.min.css';
    import Home from './ComponentList/Home';
    // import Searchbox from './Searchbox';
    // import logo from './logo.svg';
     
    function App() {
      return (
        <BrowserRouter>        
        <Switch>
          <Route exact path="/">
              <Home/>
            </Route>
            <Route path="/store/:name/:id" component={Store}>
            <StoreDetails/>
            </Route>
            <Route path="/store/:name/:id" component={Store}>
              <Store/>
            </Route>
            <Route path="/store/:name/:id" component={CustomerReview}>
              <CustomerReview/>
            </Route>
            <Route path="/store/:name/:id" component={Related}>
              <Related/>
            </Route>
            <Route path="/categories/:name/:id" component={CategoriesList}>
              <CategoriesList/>
            </Route>
            
          </Switch>
      </BrowserRouter>
        )
    }
    
    export default App;

Menu.js

    import React, { Component } from 'react';
    import { Grid, Image} from 'semantic-ui-react';
    import { Link } from 'react-router-dom';
    export default class Menu extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          data: [],
          isLoading: true
        };
      }
     
        async componentDidMount() {
          const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title: 'React POST Request Example' })
        };
    
        const url = "https://test.app/api/v4/web/categories";
        fetch(url,requestOptions)
          .then((response) => response.json())
          .then((json) => {
            this.setState({ data: json.categories});
            console.log(json.categories)
          })
          .catch((error) => console.error(error))
          .finally(() => {
            this.setState({ isLoading: false });
          });
      }
    
      render() {
         
        return (
            <Grid className="home-icon">
            <Grid.Row centered doubling  columns={8} mobile>
            {this.state.data.map((x, i) => 
            
          <Grid.Column centered key={i} >       
           <Link to={"categories/"+x.store_name+"/"+x.id}><Image src={x.image} alt=""/></Link>
          <p>{x.store_name}</p>
          </Grid.Column>
           )}
            </Grid.Row>
            </Grid>
        
        );
      }
    };

CategoriesList.jsx

    import React, { Component, Fragment } from 'react';
    import { withRouter, Link} from 'react-router-dom';
    import { Grid, Image, Segment, Card } from 'semantic-ui-react';
    import TopMenuStrip from '../ComponentList/TopMenuStrip';
    import LogoSection from '../ComponentList/LogoSection';
    import Footer from '../ComponentList/Footer';
    import Menu from '../ComponentList/Menu'; 
    import CopyRight from '../ComponentList/CopyRight'; 
    class CategoriesList extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          data: [],
          isLoading: true
        };
      }
    
      async componentDidMount() {
        // console.log(this.props.match.params.id)
        let url_id=this.props.match.params.id;
        console.log('category')
        console.log(url_id)
        const url = 'https://test.app/api/v4/web/list';
        const postBody = {
            category_id: url_id,
          offer_type: "",
        };
        const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(postBody),
          
      };
    
      fetch(url,requestOptions)
        .then((response) => response.json())
        .then((json) => {
          this.setState({ data: json});
          console.log('sasasas')
          console.log(json)
        })
        .catch((error) => console.error(error))
        .finally(() => {
          this.setState({ isLoading: false });
        });
    }
    
      render() {
        if (!this.state.data.stores) {
          return null;
        }
        const ListStores = this.state.data.stores;
        return (
          <Fragment>
                    <TopMenuStrip/>
                <LogoSection/>
                <Menu/>
                <Grid className='store-list'>
            <Grid.Column width={16}>
               <p><span>Stores List</span></p>
            </Grid.Column>
         </Grid>    
          <Grid columns={4} className='all-offers storeList'>
         {ListStores.map((x) => {
             return (
            <Grid.Column>
               <Segment>
                  <Card>
                  <Link to={x.store_url}> <Image src={x.image} alt="" className='collection-img'></Image></Link>
                     <Card.Content>
                     <Link to={x.store_url}> <Card.Header>{x.name}</Card.Header></Link>
                        <Card.Description>
                           {x.store_summary}
                        </Card.Description>
                     </Card.Content>
                     <Card.Content extra>
                        <p className='rewards'><span><img src='/images/rewards.png' alt=''></img></span>Cash rewards upto <span>AED {x.cashback}</span></p>
                        <p className='location'><span><img src='/images/location.png' alt=''></img></span> {x.store_branches[0].store_city} & {x.store_branches[0].store_location}</p>
                     </Card.Content>
                  </Card>
               </Segment>
            </Grid.Column>
         )
        })}
         </Grid>
         <Footer/>
         <CopyRight/>
          </Fragment>
        );
      }
    };
    export default withRouter(CategoriesList);

标签： reactjs

解决方案

哦，我知道这个错误！

当您/在' tos和. 要使其正常工作，请编写而不是：react-routerLinkNavLink

<Link to={"categories/"+x.store_name+"/"+x.id}>

这个：

<Link to={"/categories/"+x.store_name+"/"+x.id}>

甚至更好：

<Link to={`/categories/${x.store_name}/${x.id}`>

这是 ES6 模板文字。看起来好多了，你不觉得吗？:) 在这里阅读： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

详细说明：不在以to属性开头的路径中添加斜杠是一种表示“我希望您将其添加到我当前 URL 的末尾！”的方式。有时它很有用，但在你的情况下它是/categories/.../categories/....

推荐阅读