-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SplitView Problem with React Router #44
Comments
Good luck to get help or a fix. WinJS is dead - dead like Windows Mobile. I would not start a new app based on WinJS. |
I am experimenting with it because it has an out-of-the-box accessibility support (for those who use screen readers and other assistive technologies) |
This is probably a bit late but in case it helps someone, below is how I'm using app.js import React from 'react';
import ReactWinJS from 'react-winjs';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
const splitViewId = "mainSplitView";
const P1 = () => <div>P1</div>;
const P2 = () => <div>P2</div>;
const P3 = () => <div>P3</div>;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date().toString(),
paneOpened: false
};
this.handleTogglePane = this.handleTogglePane.bind(this);
this.handleAfterClose = this.handleAfterClose.bind(this);
}
navigateTo(path) {
this.router.history.push(path);
}
handleTogglePane() {
this.setState({ paneOpened: !this.state.paneOpened });
}
handleAfterClose() {
this.setState({ paneOpened: false });
}
handleNaviagate(path) {
this.navigateTo(path);
this.setState({
paneOpened: false
});
}
componentDidMount() {
this.navigateTo('/');
}
render() {
var paneComponent = (
<div>
<div>
<ReactWinJS.SplitViewPaneToggle
aria-controls={splitViewId}
paneOpened={this.state.paneOpened}
onInvoked={this.handleTogglePane} />
</div>
<ReactWinJS.SplitView.Command
label="Home"
icon="home"
onInvoked={this.handleNaviagate.bind(this, '/')} />
<ReactWinJS.SplitView.Command
label="Favorite"
icon="favorite"
onInvoked={this.handleNaviagate.bind(this, '/p2')} />
<ReactWinJS.SplitView.Command
label="Settings"
icon="settings"
onInvoked={this.handleNaviagate.bind(this, '/p3')} />
</div>
);
var contentComponent = (
<Router ref={(router) => { this.router = router; }}>
<div>
<header id="mainHeader">
<ReactWinJS.SplitViewPaneToggle
aria-controls={splitViewId}
paneOpened={this.state.paneOpened}
onInvoked={this.handleTogglePane} />
<h1 className="win-type-header">Title</h1>
<div className="date">{this.state.date}</div>
</header>
<div>
<Route exact path="/" component={P1} />
<Route path="/p2" component={P2} />
<Route path="/p3" component={P3} />
</div>
</div>
</Router>
);
return (
<ReactWinJS.SplitView
id={splitViewId}
closedDisplayMode="none"
paneComponent={paneComponent}
contentComponent={contentComponent}
paneOpened={this.state.paneOpened}
onAfterClose={this.handleAfterClose} />
);
}
}
export default App; |
Hi,
I am facing a problem with Winjs and React Router when using the SplitView component.
Those are my components:
The text was updated successfully, but these errors were encountered: