Jo Ko Jo Ko - 5 months ago 30
Javascript Question

Why isn't react-router Link working (ReactJS + Redux)?

In my root component client.js, I have the following set up:

render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
component={MainPage}
path="/"
>
<Route
component={HomePage}
path="Home"
/>
</Route>
</Router>
</Provider>
</div>,
document.getElementById('app')
)


And in my return(), MainPage.js:

<RaisedButton
containerElement={<Link to={`Home`}/>}
label="Button1"
labelColor='#88898C'
labelStyle={{textTransform:'intial'}}
style={styles.signIn}
/>


and outside of return() of MainPage.js:

export default connect(
mapStateToProps, mapDispatchToProps
)(MainPage.js)


Lastly, in my HomePage.js,

return(
<div>Hello World</div>
)


and outside of return() of HomePage.js:

export default connect(
mapStateToProps, mapDispatchToProps
)(HomePage.js)


MainPage.js shows up and when I click on the , the link (URL) correctly changes to 'Home' but the HomePage.js is not being rendered (coming up, replacing the MainPage.js). Any insight or guidance on what the issue may be would be greatly appreciated. Thank you in advance.

NEW EDIT**:

render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
component ={Login}
path='/'
/>
<Route
component={App}
path="Home"
>
<IndexRoute
component={MainCard}
/>
<Route
component={FirstPage}
path="/Discussion"
/>
<Route
component={SecondPage}
path="/Team 1"
/>
<Route
component={ThirdPage}
path="/Team 2"
/>
<Route
component={ThreadPage}
path="/discussion/:id"
/>
<Route
component={StaticPage}
path="/Static"
/>
</Route>
</Router>
</Provider>
</div>,
document.getElementById('app')
)

Answer

if you want to replace MainPage by HomePage, there are ways

place "Home" route on the same level

<Router history={hashHistory}>
        <Route component={MainPage} path="/" />
        <Route component={HomePage} path="Home" />
</Router>

with nesting

import {IndexRoute, ...} from 'react-router';

<Router history={hashHistory}>
    <Route component={App} path="/" >
        <IndexRoute component={MainPage} />
        <Route component={HomePage} path="Home" />
        <Route component={AnotherPage} path="Page" />
    </Route>
</Router>

then in App component, place this.props.children, it will be place for components.


also you can use named components, insted of this.props.children. It alows you to place more then one component per route.

<Router history={hashHistory}>
    <Route component={App} path="/" >
        <IndexRoute components={{main:MainPage, left:LeftContent}} />
        <Route path="Home" components={{main:HomePage, left:LeftContent}}  />
        <Route path="Page"components={{main:AnotherPage}} />
    </Route>
</Router>

then in App component, place this.props.main and this.props.left, it will be place for components.