Question

我正在尝试理解如何在当前项目中正确使用ReactRouter。该项目包含一个带有概述的仪表板，可以打开每个项目进行编辑。我试图在用户点击链接后导航到特定项目并呈现编辑视图。

index.js：

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/" component={App}/>
      <Route exact path="/dashboard" component={App}/>
      <Route path="dashboard/:id" component={Editing}/>
      <Route exact path="/about" component={About}/>
    </div>
  </Router>, document.getElementById('root'));

App组件包含一个容器

import ItemContainer from './components/ItemContainer.js';
...
<div className='container'>
     <ItemContainer user={this.state.user} items={this.state.items} userProfile={this.state.userProfile}/>
</div>

容器根据容器的状态将项目列表映射到仪表板。

if(this.state.view === "editing"){
      return (
         <ItemEdit item={this.state.currentItem} uid={this.props.user.uid} 
         viewList={this.changeViewList.bind(this)}/>
      )}
if(this.state.view === "list"){
      return (
      this.props.items.map (item =>
            <li key={item.id}>
                <Item item={item} user={this.props.user} view={this.changeViewEditing.bind(this)}/>
            </li>
      ))}

每个项目都来自项目组件，其中包含用于更改为编辑视图的按钮

<div>
    <h3>
        {this.props.appName}
    </h3>
    <Link to={`/dashboard/${this.props.item.id}`}><button onClick={() => this.editItem(this.props.item)}>Edit</button></Link>
</div>

在最后一个方框中，问题当然是链接导致空网址 dashboard / item：id 。从示例中我一直在尝试理解如何精确配置，因为编辑视图只是App组件的子组件。我已经尝试过来自ReactRouter网站的示例，但我无法理解如何在我的上下文中实现他们的示例。

谢谢！

Answer 1

<Route path="/dashboard/:id" component={Editing}/> - 试试这个，也许是帮助

/ - 你可能错过了这个符号

Answer 2

我有类似的问题。虽然对我来说只需要5个组件，所以我使用了一个开关盒，但你可以理解它的基本原理。

class TestComponent implements Component{
   constructor(props){
      super(props);
   }
     renderComponent(){

        switch(this.props.params.Id){
           case 1: return (<Component1/>); 
                   break;
           case 2: return (<Component2/>); 
                    break;
           case 3: return (<Component3/>); 
                    break;
           default: return(<div></div>);
                    break;

       }
     }
       render(){
          return(<div>{this.renderComponent()}</div>);
      }
}

ReactRouter和react-create-app;如何通过id呈现子组件？

2 个答案: