路由保持不变的链接平台/:id在Navbar下拉项目反应-引导

Question

我想在每次选择导航栏下拉项目时实现link= /platform/:id。相反，我得到/platform/:id/platform:id

Header.js的代码：

import React from 'react'
import { Route } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap'
import SearchBox from './SearchBox'
import { logout } from '../actions/userActions'

const Header = () => {
  const dispatch = useDispatch()

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo } = userLogin

  const logoutHandler = () => {
    dispatch(logout())
  }

  return (
    <header>
      <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
        <Container>
          <LinkContainer to='/'>
            <Navbar.Brand>ProShop</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Route render={({ history }) => <SearchBox history={history} />} />
            <Nav className='ml-auto'>
              <NavDropdown title='Nintendo' id='nintendomenu' to='/category/nintendo'>
                <LinkContainer to='platform/nintendo3ds'>
                  <NavDropdown.Item>Nintendo 3ds</NavDropdown.Item>
                </LinkContainer>
                
                <LinkContainer to='platform/nintendo2ds'>
                  <NavDropdown.Item>Nintendo 2ds</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendods'>
                  <NavDropdown.Item>Nintendo 2ds</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendoswii'>
                  <NavDropdown.Item>Nintendo Wii</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendowiiu'>
                  <NavDropdown.Item>Nintendo Wii U</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendoswitch'>
                  <NavDropdown.Item>Nintendo Switch</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendoswitchlite'>
                  <NavDropdown.Item>Nintendo Switch Lite</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/gameboy'>
                  <NavDropdown.Item>Nintendo Gameboy</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/supernintendo'>
                  <NavDropdown.Item>Nintendo Super</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendo64'>
                  <NavDropdown.Item>Nintendo 64</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/nintendods'>
                  <NavDropdown.Item>Nintendo DS</NavDropdown.Item>
                </LinkContainer>
              </NavDropdown>

              <NavDropdown title='playstation' id='playstation'>
                <LinkContainer to='platform/playstation1'>
                  <NavDropdown.Item>Playstation</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/playstation2'>
                  <NavDropdown.Item>Playstation 2</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/playstation3'>
                  <NavDropdown.Item>Playstation 3</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/playstation4'>
                  <NavDropdown.Item>Playstaion 4</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/playstation5'>
                  <NavDropdown.Item>Playstation 5</NavDropdown.Item>
                </LinkContainer>
              </NavDropdown>

              <NavDropdown title='xbox' id='' to=''>
                <LinkContainer to='platform/xbox1'>
                  <NavDropdown.Item>Xbox</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer>
                  <NavDropdown.Item to='platform/xbox360'>Xbox 360</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer>
                  <NavDropdown.Item   to='platform/xboxone'>Xbox One</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/xboxseriesx'>
                  <NavDropdown.Item>Xbox Series X</NavDropdown.Item>
                </LinkContainer>
                <LinkContainer to='platform/xboxseriess'>
                  <NavDropdown.Item>Xbox Series S</NavDropdown.Item>
                </LinkContainer>
              </NavDropdown>


              <LinkContainer to='/cart'>
                <Nav.Link>
                  <i className='fas fa-shopping-cart'></i> Cart
                </Nav.Link>
              </LinkContainer>
              {userInfo ? (
                <NavDropdown title={userInfo.name} id='username'>
                  <LinkContainer to='/profile'>
                    <NavDropdown.Item>Profile</NavDropdown.Item>
                  </LinkContainer>
                  <NavDropdown.Item onClick={logoutHandler}>
                    Logout
                  </NavDropdown.Item>
                </NavDropdown>
              ) : (
                <LinkContainer to='/login'>
                  <Nav.Link>
                    <i className='fas fa-user'></i> Sign In
                  </Nav.Link>
                </LinkContainer>
              )}
              {userInfo && userInfo.isAdmin && (
                <NavDropdown title='Admin' id='adminmenu'>
                  <LinkContainer to='/admin/userlist'>
                    <NavDropdown.Item>Users</NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer to='/admin/productlist'>
                    <NavDropdown.Item>Products</NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer to='/admin/orderlist'>
                    <NavDropdown.Item>Orders</NavDropdown.Item>
                  </LinkContainer>
                </NavDropdown>
              )}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  )
}

export default Header

App.js中/platform/:id的路由：

<Route path="/platform/:id" component={HomeScreen} />

我想要实现的目标：http://localhost:3000/platform/xboxone，当xboxone被选择为http://localhost:3000/platform/xbox360时，当xbox360被选择在xboxone之后

我现在得到的是：http://localhost:3000/platform/xboxone，当xboxone被选择为http://localhost:3000/platform/platform/xbox360时，当xbox360被选择在xboxone之后

请帮忙谢谢！

编辑:所以，就像我说的，每当我选择Nav.Dropdown.Item时，我就会得到一个结果--例如:如果我选择Nav.Dropdown.Item playstation3，它就会转到http://localhost:3000/platform/playstation3，这就是我所需要的。

NOw，在http://localhost:3000/platform/playstation2之后，如果我选择另一个Nav.Dropdown.Item playstation2，它将转到http://localhost:3000/platform/playstation3/platform/playstation2

相反，每当选择另一个导航下拉项目时，我想转到http://localhost:3000/platform/playstation2。

HomeScreen.js：

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Message from '../components/Message'
import Loader from '../components/Loader'
import Paginate from '../components/Paginate'
import ProductCarousel from '../components/ProductCarousel'
import Meta from '../components/Meta'
import { listProducts } from '../actions/productActions'

const HomeScreen = ({ match }) => {
  const keyword = match.params.keyword
  const [sortOrder, setSortOrder] = useState('');
  //const category = match.params.id ? match.params.id : '';
  const platform = match.params.id ? match.params.id : ''; 
  const pageNumber = match.params.pageNumber || 1

  const dispatch = useDispatch()

  const productList = useSelector((state) => state.productList)
  const { loading, error, products, page, pages } = productList

  useEffect(() => {
    dispatch(listProducts(platform, keyword, pageNumber, sortOrder))
  }, [dispatch, keyword, pageNumber, sortOrder])
  

  const sortHandler = (e) => {
    setSortOrder(e.target.value);
    dispatch(listProducts(platform, keyword, sortOrder));
  };


  return (
    <>
      <Meta />
      {!keyword ? (
        <ProductCarousel />
      ) : (
        <Link to='/' className='btn btn-light'>
          Go Back
        </Link>
      )}
      {/*category && <h2>{category}</h2>*/}
      <ul className="filter">
        <li>
          Sort By{' '}
          <select name="sortOrder" onChange={sortHandler}>
            <option value="">Newest</option>
            <option value="lowest">Lowest</option>
            <option value="highest">Highest</option>
          </select>
        </li>
      </ul>
      {loading ? (
        <Loader></Loader>
      ) : error ? (
        <Message>{error}</Message>
      ) : (
        <>
          <Row>
            {products.map((product) => (
              <Col key={product._id} xs={6} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}
          </Row>
          {/*<Paginate
            pages={pages}
            page={page}
            keyword={keyword ? keyword : ''}
          />*/}
        </>
      )}
    </>
  )
}

export default HomeScreen

Answer 1

所以对于你之前的问题，我想我们用的是

<LinkContainer to='/platform/nintendowiiu'> 

 // instead of
<LinkContainer to='platform/nintendowiiu'>

现在，要解决另一个问题，即您的内容应该更改，您应该使用useParams。您可以获得URL参数并相应地设置状态。这将导致组件重新呈现，而不需要刷新页面。

对于使用useParams，只需执行以下操作

// First import
import { useParams } from "react-router-dom";

// Then use it in your component
const { platformId } = useParams();

platformId是您可能使用过的变量的名称，您已经设置了路由。基本上，不管你在冒号后面设置了什么变量。

<Route path="/platform/:platformId" component={HomeScreen} />