Question

我在屏幕的左侧有一个使用map显示的数据列表，单击时，应在同一屏幕的右侧呈现一个新组件，并且url也必须在其中更改浏览器，考虑使用onClick而不是Link to，但如果使用，则无法指定url的更改。

const Home = (props) => {
return(
<div className="main-wrapper">
  <div className="service-wrapper">
    <Service/>
  </div>
  <div className="list-wrapper">
    <Route path="/service/service_name" exact component={List}/>
  </div>
</div>
);
}

Answer 1

反应路由器v4利用动态路由，即，如果位置匹配正确的路由，则新组件可以呈现。

要实现所需的功能，可以添加带有特定链接路径的Route，以呈现新组件。

在您的代码中，只需在以下行中进行更改：-

 <div className="list-wrapper">
       <Route path="Your path" component={List} /> 
 </div>

Answer 2

您可以使用onClick，但是随后您将不得不使用react路由器库提供的历史记录对象。它看起来像这样：-

onClick(() => history.push(`/service/${service}`));

要访问历史记录，您必须从React Router库中使用Router hoc导入。

    import { withRouter } from "react-router-dom";


    class YourComponent extends Component {

      const { history } = this.props;

    }

    export default withRouter(YourComponent);

左右仪表板结构应如下所示：-

const LeftDashboard = () => {
   return (
    <div>
     // rest of your ui
    </div>
   )
}

const RightDashboard = ({ activeParam }) => {

  const renderActive = () => {
     switch(activeParam) {
    case 1:
     return somecomponent;
    case 2:
     return someother;
    default:
     return defaultcomponent;
   }  
  }

   return renderActive();
}

 class App extends Component {

  render() {
   <React.Fragment>
    <LeftDashboard />
    <RightDashboard activeParam={//pass active param} />
   </React.Fragment> 
  }
 }

另一个选择是将您的路线放置在正确的仪表板组件中：-

const RightDashboard = () => {
   return (
    <React.Fragment>
     <Route path="/somepath" component={<Mycomponent />} />
     <Route path="/someotherpath" component={<Myothercomponent />} />
    </React.Fragment>
   )

}

其余结构与上面相同。

导航到同一页面布局中的另一个组件

2 个答案: