在 reactjs 中创建动态路由和渲染组件答案

【问题标题】：Create Dynamic route and render component in reactjs在 reactjs 中创建动态路由和渲染组件
【发布时间】：2020-09-02 05:27:28
【问题描述】：

我是 ReactJs 的新手。我需要像 localhost:3000/directory/category/region/brandName 这样的路由，对于相同的路由，我需要渲染一个组件

网址示例

localhost:3000/目录/摄影/法国/testA
localhost:3000/目录/餐饮/德国/testB

对于以上两个 URL，一个名为 name.js 的组件应该呈现

【问题讨论】：

标签： reactjs components render dynamic-routing

【解决方案1】：

你可以使用 react-router 然后通过使用路由参数来配置你的路由

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App () => {
  return (
     <Router>
       <Switch>
           <Route path="/directory/:profession/:country/:value" component={Name} />
           <Route path="/" component={Dashboard}/>
       </Switch>
  )
}

现在发布这个您可以访问名称组件中的参数并从 api 中获取数据或具有任何其他逻辑

const Name = () => {
   const { profession, country, value} = useParams();

   useEffect(() => {
       // Any fetch logic based on params
   }, [profession, country, value]);

   return (
       ..
   )
}

您可以阅读有关react-router usage here 和refer the docs 的更多信息

【讨论】：

【解决方案2】：

我试过了，但没有成功。我导入了一个组件以单击它，但我看不到它。这就是我所做的。

<Router>
  <Switch>
    <Route path="/directory/:profession/:country/:value" component={Pid} >
       <div className="wx-360px">
         <Card6 title={item.companyName} introduction={item.slogan} thumb={item.coverImage !== undefined && item.coverImage !== '' ? item.coverImage : item.sliderImages[0]}/>
       </div>
   </Route>
  </Switch>
</Router>

【讨论】：

【解决方案3】：

据我从问题中了解到，您可以通过使用“重定向”组件来处理这个问题。让有一个“导航”组件，其中“路由器”被定义为你所做的

Navigation.js

import Name from './name';
import From from './from';

<Router>
  <Switch>
    <Route path="/from">
       <From />
    </Route>
    <Route path="/directory/:profession/:country/:value">
       <Name />
   </Route>
  </Switch>
</Router>

和定义路径和重定向的“From”组件。如果“redirectionPath”不为空，您可以在渲染中返回“重定向”组件。因此，您可以重定向并呈现 Name 组件。

来自.js

import React, {Component} from 'react';
import {
    Redirect
} from "react-router-dom";


class From extends Component {
    state={
        redirectionPath: "/directory/photography/france/testA" // or setState anywhere you need.
    }

    ...

    render(){
        if(this.state.path){
            return (<Redirect to={this.state.redirectionPath} />)
        }
        return (
            <SomeComponent/>
        );
    }
}

这可能是解决方案之一。希望它也适用于你。

【讨论】：