Reactjs react路由器和express子路由未触发

我试图在本地机器上创建一个类似于JSFIDLE的简单项目配置

我只想有3个文件，每个小提琴和服务器启动单页应用程序。我主要使用react生态系统

当我想使用react路由器时，问题就出现了。使用此设置，只有根“/”路由触发器和所有子路由重定向到index.html

（我将省略样式文件，因为我怀疑它是问题的根源）

有什么建议吗

server.js

index.html

带路由器的多页表单

main.js

const{Component}=React
const{Router，Route，browserHistory，IndexRoute，Link}=ReactRouter
常量应用=（）=>(
);
常量头=（）=>(
多页表单
)
常量菜单=（）=>(

起始形式

)
常量第一页=（）=>{
返回(
首页

下一个
)
}
常量第二页=（）=>{
返回(
第二页

下一个
)
}
常量概览=（）=>{
返回（概述
）
}
ReactDOM.render(
,
document.getElementById（'root'））
)

我认为您应该重定向您的

链接

标记，使其前面有一个

斜杠（/）

如下所示

<Link to='/first'>Start form</Link>

开始表单

除非我在这里遗漏了什么，否则根路由应该呈现它们自己，但也呈现它的子路由。在您的示例中，Header只是呈现它的efl

这是我的一个工作示例：

<Router history={browserHistory}>
  <Route path='/' component={Root}>
    <Route path='/examples/react-redux-websocket' component={App} />
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} />
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} />
    <Route path='/*' component={NoMatch} />
  </Route>
</Router>

根据您使用的版本，可能会有一些差异，例如，我使用的是react route 3.0.2，但在一般情况下，它的用法大致相同

我不知道您使用的是什么版本，但您可能需要在添加“/”之前引用路由

我希望能帮助你。让我知道，如果有什么你不明白或你认为是不正确的，我们可以讨论

---

您可以查看整个示例，如果希望看到它工作，您可以发现它

我已经尝试了两种方法，但两种方法都不起作用。事实上，将路径直接放在URL中只会触发index.html。你指定哪条路线无关紧要。因戴德，我想念孩子们。非常感谢。很高兴能帮助你！！

const { Component } = React
const { Router, Route, browserHistory, IndexRoute, Link } = ReactRouter

const App = () => (
  <Router history={browserHistory}>
    <Route path='/' component={Header}>
      <IndexRoute component={Menu} />
      <Route path='first' component={FirstPage} />
      <Route path='second' component={SecondPage} />
    </Route>
  </Router>
);

const Header = () => (
  <h1>Multi-page form</h1>
)

const Menu = () => (
  <ul>
    <li><Link to='first'>Start form</Link></li>
  </ul>
)

const FirstPage = () => {
  return (
    <div>
      <p>First Page</p>
      <Link to='second'>Next</Link>
    </div>
  )
}

const SecondPage = () => {
  return (
    <div>
      <p>Second Page</p>
      <Link to='overview'>Next</Link>
    </div>
  )
}

const Overview = () => {
  return (<p>Overview</p>)
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<Link to='/first'>Start form</Link>

<Router history={browserHistory}>
  <Route path='/' component={Root}>
    <Route path='/examples/react-redux-websocket' component={App} />
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} />
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} />
    <Route path='/*' component={NoMatch} />
  </Route>
</Router>

class Root extends Component {
  render () {
    return (
      //Render itself
      <div>
        //And its children too
        {this.props.children}
        <Footer />
      </div>
    )
  }
}

<Route path='/xxx/route_1' component={Route_1} />
<Route path='/xxx/route_2' component={Route_2} />