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

Question

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

URL 示例如下

1. 本地主机：3000/目录/摄影/法国/testA
2. 本地主机：3000/目录/餐饮/德国/testB

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

Answer 1

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

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

Answer 2

您可以使用 react-router 然后通过使用 Route 参数来配置您的 Routes

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 用法的更多信息，还可以参考文档

Answer 3

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

导航.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/>
        );
    }
}

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