在 Go 中带有 child 的 React-Router 它是如何工作的?
React-Router with child in Go how does it work?
我正在尝试在 Go 中将 react-router 与服务器一起使用。
我做了一些测试,但我不能做我想做的。
我的反应组件:
var App = React.createClass({
render: function(){
return (
<div>
<h2>App</h2>
<li><Link to="/page1">Page 1</Link></li>
<li><Link to="/page2">Page 2</Link></li>
</div>
)
}
})
var Page1 = React.createClass({
render: function(){
return (
<div>
<h2>Page 1</h2>
<li><Link to="/page2">Page 2</Link></li>
</div>
)
}
})
var Page2 = React.createClass({
render: function(){
return (
<div>
<h2>Page 2</h2>
<li><Link to="/page1">Page 1</Link></li>
</div>
)
}
})
我的反应路由:
ReactDOM.render((<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>), document.getElementById('app'))
我的围棋服务器:
func Render(c web.C, w http.ResponseWriter, r *http.Request) {
RenderHTMLPage(w, "index.html")
}
func main() {
goji.Get("/page1", Render)
goji.Get("/page2", Render)
goji.Get("/", Render)
goji.Serve()
}
我的问题是当我点击 'App' 组件中的 Link 时,例如:
<li><Link to="/page1">Page 1</Link></li>
url 那样变化
但实际组件已经是 App 而不是 Page1,所以 url 更改但不是组件。
如果我直接加载 url,我得到相同的结果。
有人帮我吗?
谢谢:)
这不是一个 go 问题,而是一个 react 问题,您需要渲染 App 组件的子组件以便显示其他两个组件,a la this code snippet taken from the docs for React Router (https://github.com/reactjs/react-router/blob/master/docs/API.md#props-2):
const routes = (
<Route component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}
我正在尝试在 Go 中将 react-router 与服务器一起使用。
我做了一些测试,但我不能做我想做的。
我的反应组件:
var App = React.createClass({
render: function(){
return (
<div>
<h2>App</h2>
<li><Link to="/page1">Page 1</Link></li>
<li><Link to="/page2">Page 2</Link></li>
</div>
)
}
})
var Page1 = React.createClass({
render: function(){
return (
<div>
<h2>Page 1</h2>
<li><Link to="/page2">Page 2</Link></li>
</div>
)
}
})
var Page2 = React.createClass({
render: function(){
return (
<div>
<h2>Page 2</h2>
<li><Link to="/page1">Page 1</Link></li>
</div>
)
}
})
我的反应路由:
ReactDOM.render((<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>), document.getElementById('app'))
我的围棋服务器:
func Render(c web.C, w http.ResponseWriter, r *http.Request) {
RenderHTMLPage(w, "index.html")
}
func main() {
goji.Get("/page1", Render)
goji.Get("/page2", Render)
goji.Get("/", Render)
goji.Serve()
}
我的问题是当我点击 'App' 组件中的 Link 时,例如:
<li><Link to="/page1">Page 1</Link></li>
url 那样变化
但实际组件已经是 App 而不是 Page1,所以 url 更改但不是组件。 如果我直接加载 url,我得到相同的结果。
有人帮我吗? 谢谢:)
这不是一个 go 问题,而是一个 react 问题,您需要渲染 App 组件的子组件以便显示其他两个组件,a la this code snippet taken from the docs for React Router (https://github.com/reactjs/react-router/blob/master/docs/API.md#props-2):
const routes = (
<Route component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}