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

Question

我是reactjs的新手。我需要一个类似localhost：3000 / directory / category / region / brandName的路由，并且对于相同的路由，我需要渲染一个组件

URL的样例

1. localhost：3000 /目录/摄影/法国/ testA
2. localhost：3000 /目录/餐饮/德国/ testB

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

Answer 1

您可以使用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访问名称组件中的参数和fetchData或具有任何其他逻辑
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的更多信息>