React-router link не работает
React-маршрутизатор выключен до очень плохого начала... То, что кажется основным, не работает. Использование react-router 2.0.0 мой компонент ссылки обновляет URL-адрес, чтобы быть / о, но моя страница не отображает компонент о После этого...
точка входа js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = require('./components/App.react');
var About = require('./components/About');
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>,
document.getElementById('app')
);
App.js
'use strict';
var React = require('react');
var Link = require('react-router').Link;
var Header = require('./Header');
var UserPanel = require('./UserPanel');
var ModelPanel = require('./ModelPanel.react');
var EventPanel = require('./event/EventPanel');
var VisPanel = require('./vis/VisPanel');
var LoginForm = require('./LoginForm');
var AppStore = require('../stores/AppStore');
var AppStates = require('../constants/AppStates');
var App = React.createClass({
[... code omitted ...]
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link to="/about">About</Link>
{viewStateUi}
</div>
);
}
});
2 ответов
поскольку маршрут "о программе" является дочерним для маршрута "приложение", вам нужно либо добавить this.props.children
к компоненту приложения:
var App = React.createClass({
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link href="/about">About</Link>
{viewStateUi}
{this.props.children}
</div>
);
}
});
или отдельные маршруты:
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App} />
<Route path="/about" component={About} />
</Router>,
document.getElementById('app')
);
по какой причине <Link>
не работает для меня с конфигурацией ниже.
индекс//.js
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
/ / App.js
return (
<div className="App">
<Route exact={true} path="/:lang" component={Home} />
<Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} />
<Route path="/:lang/play" component={Play} />} />
<Route path="/:lang/end" component={End} />
</div >
);
домашний компонент имел ссылку, но ссылки на приложение будет делать то же самое. Каждый раз, когда я нажимал на него, он изменял только url-адрес, но представления оставались прежними.
я смог поставить его работать, когда я добавил withRouter приложение.js
export default withRouter(connect(mapStateToProps, { f, g })(App));
Я все еще не понять, что произошло. Может быть, это связано с redux или есть какая-то деталь, которую я упускаю.