reactjs - 通过路径从 react-router 获取组件

Question

如何通过路径从 react-router v4 获取组件？

我正在寻找一种通过路径获取之前配置的组件的方法。

例如我有这条路线：

import React from 'react';
import UserScreen from './UserScreen';
...
<Route path='/user/:id' component={UserScreen}/> 

现在我想通过路径获取 UserScreen 组件。像这样的东西：

getComponentByPath(path){
   // looking for this section 
}

render(){
  const component = getComponentByPath('/user/12');
  return (<component />);
}

我正在寻找Component 对象。

标签： reactjsreact-routerreact-router-v4

Answer 1

您可以使用BrowserRouter反应路由器 v4 并渲染具有相应路由的组件。

<BrowserRouter>
    <Switch>
      <Route path='/user/:id' component={UserScreen}/> 
   </Switch>
</BrowserRouter>

做一个UserScreen.js：

class UserScreen extends Component {

render() {

    return (
    <div>hello world</div>
    )
  }
}