React路由器無法顯示多條路線

我試圖顯示一個帶有很長鏈接列表的側欄，然後當點擊其中任何一個鏈接時，它會在右側添加一個組件，其中包含有關點擊鏈接的信息。React路由器無法顯示多條路線

目前，它一次只能渲染一個組件。

這是我的主要渲染方法與所有的路線。

render(
    <Provider store={store}> 
    <Router history={hashHistory}> 
     <Route path="/"> 
     <IndexRoute component={App} /> 
     <Route path="/p/:personId" component={Person} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
);

我也嘗試過本作的主要呈現方式與所有的路線。

render(
    <Provider store={store}> 
    <Router history={hashHistory}> 
     <Route path="/" component={App} /> 
     <Route path="/p/:personId" component={Person} /> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
);

這是我App的組成部分。

export default class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Sidebar /> 
     {this.props.children} 
     </div> 
    ) 
    } 
}

這裏是我的Person組件。

export class PersonComponent extends React.Component { 

    constructor(props) { 
    super(props) 

    this.personId = this.props.params.personId 
    this.person = this.props.people.find(person => person.id === this.personId) 
    } 

    render() { 
    return (
     <div> 
     <h2>{this.person.name}</h2> 
     <div> 
      <h5>email: {this.person.email}</h5> 
      <h5>age: {this.person.age}</h5> 
     </div> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    people: state.people 
    } 
} 

const Person = connect(mapStateToProps)(PersonComponent) 
export default Person

來源

2017-04-04 qbolt

可以嘗試更改默認頁面你在'人員'路線到'＃/ p /：personId'的路徑？你使用哈希歷史，所以這可能是缺少的？ – ZekeDroid

'警告：[react-router]位置「/ p/58e14ffe843f7a202f500e9d」與任何路由不匹配＃路由本身工作正常，我似乎無法弄清楚如何讓它顯示兩條路由該頁面在同一時間。 – qbolt

我不認爲它會在你的情況下看你的路由器組件。我寧願想用列表中的onClick事件處理程序觸發狀態更改。 – ArkadyB

如果你想通過Person爲App子組件，需要以下配置

render(
    <Provider store={store}> 
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
     <Route path="/p/:personId" component={Person} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
);

IndexRoute需要渲染的「/」位置

來源

2017-04-04 15:26:49 hmnzr

謝謝！這有助於獲取它的渲染，但如果我可以提出另一個問題 - 它似乎只是在第一個事件觸發時渲染內部組件，然後當點擊左側的另一個鏈接時組件不會重新渲染。 – qbolt

沒關係。沒有研究生命週期方法。需要使用'componentWillReceiveProps'。 – qbolt

很高興你已經完成了！ – hmnzr

React路由器無法顯示多條路線

回答

相關問題