如何创建动态路由，以基于react-router-dom中组件的属性命名路由

问题描述

让我们想象一下，我有一个组件可以连续显示多个div。

非常简单

if (props.hotels.length != undefined) {
    const data = props.hotels;
    const listItems = data.map((d) => (
      <div className="hotel-row">
        <Hotel name={d.name} category={d.category} image={d.image} description={d.description}/>
      </div>
    ));

    return <div className="hotel-list">{listItems}</div>;
  }

上面的代码将返回一个包含酒店内容的div列表，这很简单。

    import * as React from "react";
    
    const Hotel = (props) => {
      return <p>{props.name} {props.category} {props.image} {props.description}</p>
    };

export default Hotel

现在，我希望单击一下每个div即可将我重定向到新路线。

这条路线应该是

/hotel/{d.name}

我正在考虑做这样的事情

<div className="hotel-row">
    <Hotel name={d.name} category={d.category} image={d.image} description={d.description} onClick={() => <Redirect to={"/"+d.name} />}/>
</div>

然后我想在组件安装期间在该路由上加载d.name的其余部分，这样我就可以从api中获取

。

我的路由器当前看起来像这样

import * as React from "react";
import { Route,Switch,withRouter,Redirect } from "react-router-dom";
import HotelList from "../Components/HotelList";
import Count from "../Components/Count";

const Router = () => {
    const renderFor404Routes = () => <Redirect to="/" />;
    return (
      <div>
        <Switch>
          <Route exactly component={HotelList} exact path="/" />
          <Route exactly component={Count} exact path="/count" />
          <Route path="/" exactly component={renderFor404Routes} />
        </Switch>
      </div>
    );
  };
  
  export default withRouter(Router);

这似乎也是个问题，因为如果我想导航至类似的路线

/ hotel / name，并且该名称在我的数据库中不存在，它不会获取任何内容，并且该组件会崩溃

解决方法

您正在谈论的是使用动态路由。非常普遍的问题，并不是很难做到。首先，我将使用<Hotel>道具将您的<Link>转换为to：

    const Hotel = (props) => {
      return 
        <Link to={`/${props.name}`}>
          {props.name} {props.category} {props.image} {props.description}
        </Link>
    };

现在您不需要onClick => <Redirect />，这很尴尬。 Link将为您完成此任务。现在，您需要设置一个能够处理动态生成的路由的组件：

// in your Switch statement:

<Route path="hotels/:hotelid" exactly component={HotelPage} />

因此，现在路由到/hotel/somehotelId将呈现您的HotelPage组件。当然，在该组件内，您需要获取路由到的特定ID。这是match道具的一部分：

const HotelPage = ({ match }) => {

  const { hotelId } = match.location

  // now you can make any API calls related to that hotel id,// or render whatever you need based on that id

}

这是一个快速的总结。 This article是对相同概念的更详细说明。

通过反应路由器dom，您可以使用路径参数来实现此目的，在路径参数中，您可以指定一条具有/hotel/:name之类的路由，其中name是路径参数的名称。

因此，您可以向<Switch>添加另一个路径，如

<Route exact path="/hotel/:name" component={HotelByName}  />

假设渲染组件HotelByName，react-router-dom通过使用react-router-dom提供的useParams()钩子提供特定路径参数的值。之后，您可以将其用于您的

中的API

例如，代表HotelByName（挂钩）

function HotelByName() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { name } = useParams();

  //or component did mount if class based
  useEffect(() => {
     //make API request with acquired name    
  },[])

  return (
    <div>
      {/* Whatever hotel data you extract */}
    </div>
  );
}

基于类的组件

class HotelByName extends Component {

  componentDidMount = () => {
  let { name } = this.props.match.params;
  //make request with acquired name
}

  render () {
   return (
    <div>
      {/* Whatever hotel data you extract */}
    </div>
  );
 }
}

react-router react-router-dom reactjs reactjs