Javascript 路由在Reactjs+中不起作用；ES6

当我点击“蛋糕”链接时，我得到的错误是路径不匹配或服务器无法找到

这是我的3个文件的代码-路由器，导航和细节组件

Routers.js-处理路由的组件

---

---

谢谢你的帮助

您不需要/in

/cake

，它已经在

/

下了。这样做：

<Route path="cake" component={ListDetail} />

您不需要/in
/cake
，它已经在
/
下了。这样做：

<Route path="cake" component={ListDetail} />

尝试以下方法，不确定是否有帮助。
1.使用

而不是

    class ContentList extends React.Component.

二,。删除路线路径中的/before“cake”

试用

 var Routes = React.createClass({
  render: function() {
   return (
    <div>
        <Router history={browserHistory}>     

var Routes=React.createClass({
render:function（）{
返回(

以及更新的代码，而不是let

希望它有帮助
尝试以下方法，但不确定是否有帮助。
1.使用

而不是

    class ContentList extends React.Component.

2.移除路线路径中/之前的“蛋糕”

试用

 var Routes = React.createClass({
  render: function() {
   return (
    <div>
        <Router history={browserHistory}>     

var Routes=React.createClass({
render:function（）{
返回(

以及更新的代码，而不是let

希望它有帮助
它与hashHistory一起工作吗

要使用browserHistory，需要设置服务器端渲染

以下是教程（特别是第11课和第13课），它帮助我理解并使用browserHistory和服务器端渲染设置react router：

希望能有所帮助。
它对hashHistory有用吗

要使用browserHistory，需要设置服务器端渲染

以下是教程（特别是第11课和第13课），它帮助我理解并使用browserHistory和服务器端渲染设置react router：

希望有帮助。
base.jsx文件的渲染函数应该是这样的：

render(){
    return(
        <div>
        <Header name="My Recipe Book"/>
        <section id="content">
        <FormElement />
        <ContentList />
         {this.props.children}
        </section>
        <Footer />
        </div>
    )
}

render（）{
返回(
{this.props.children}
)
}

路线应该是

<Route path="cake" component= {ListDetail} />



链接：

<Link to="cake">Cakes</Link>

蛋糕

您需要在某处渲染路线

…当路由与URL匹配时要呈现的单个组件。它可以由父路由组件使用this.props.children呈现

const路由=(
)
类应用程序扩展了React.Component{
渲染（）{
返回(
{/*这将是或*/}
{this.props.children}
)
}
}
base.jsx文件的渲染函数应该如下所示：

render(){
    return(
        <div>
        <Header name="My Recipe Book"/>
        <section id="content">
        <FormElement />
        <ContentList />
         {this.props.children}
        </section>
        <Footer />
        </div>
    )
}

render（）{
返回(
{this.props.children}
)
}

路线应该是

<Route path="cake" component= {ListDetail} />



链接：

<Link to="cake">Cakes</Link>

蛋糕

您需要在某处渲染路线

…当路由与URL匹配时要呈现的单个组件。它可以由父路由组件使用this.props.children呈现

const路由=(
)
类应用程序扩展了React.Component{
渲染（）{
返回(
{/*这将是或*/}
{this.props.children}
)
}
}
如果我们有ES6，返回ES5没有任何意义，但是关于斜杠，是的，可能是。这也是我的想法，但已经发布了答案。检查你在main.js文件中传递了什么？你在传递路由器ie吗，它应该看起来像var content=document.getElementById（'app'）ReactDOM.render（，content）；如果我们有ES6，返回ES5没有任何意义，但是关于斜杠，是的，可能是。这也是我的想法，但已经发布了答案。检查你在main.js文件中传递了什么？你在传递路由器ie吗，它应该看起来像var content=document.getElementById（'app'）之类的东西ReactDOM.render（，content）；Nope这没有帮助：（不，这没有帮助：（你可以发布你的base.jsx文件吗？添加，你可以检查你在哪里渲染{this.props.children}？你应该在base.jsx文件中渲染它。worked:）谢谢，我很高兴能提供帮助。你可以发布你的base.jsx文件吗？添加，你可以检查你在哪里渲染{this.props.children}？您应该在Base.jsx文件中渲染它。worked:）谢谢，很高兴我能帮上忙。
const routes = (
  <Route path="/" 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>
    )
  }
}