React-Router 带着孩子在 Go 怎么样？-Java 学习之路

我正试图在 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'组件中的链接时，例如：

<li><Link to="/page1">Page 1</Link></li>

网址改变就是这样

http://localhost:8000/page1

但实际组件已经是 App 而不是 Page1，因此 url 会更改但不会更改组件。如果我直接加载 url，我有相同的结果。

有人帮我吗？谢谢:)

1 回答

这不是一个问题，而是一个反应问题，你需要呈现 App 组件的子节点以便显示其他两个组件，这个代码片段取自 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>
    )
  }
}

回复于 2024-04-26T08:10:59+08:00

React-Router 带着孩子在 Go 怎么样？

1 回答

相关问题