react-router 和 express 子路由没有触发答案

【问题标题】：react-router and express child routes not triggeringreact-router 和 express 子路由没有触发
【发布时间】：2017-04-20 12:58:07
【问题描述】：

我正在尝试在我的本地机器上创建一个类似于 jsfiddle 的简单项目配置。

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

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

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

有什么建议吗？

server.js

var express = require('express');
var path = require('path');
var morgan = require('morgan');
//var history = require('connect-history-api-fallback');

var PORT = 3007;
var HOST = 'localhost'

var app = express();

/*
app.use(history({
  disableDotRule: true,
  verbose: true
}));
*/

app.use(morgan('tiny'));

// Serve static assets
app.use(express.static(__dirname));

// Always return the main index.html
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(PORT, HOST, function () {
  console.log('Example app listening on port ' + HOST + ':' + PORT + '...');
});

index.html

<html>
  <head>
    <title>multi-page-form-with-router</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.3/react-redux.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.4/ReactRouter.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.6.3/redux-form.min.js"></script>

    <script type="text/babel" src="main.js"></script>

  </body>
</html>

main.js

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')
)

【问题讨论】：

标签： reactjs express react-router single-page-application

【解决方案1】：

除非我在这里遗漏了一些东西，否则根路由应该渲染自己，但也渲染它的子路由。在您的示例中， 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>

Root.js：

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

如您所见，在 Root 路由内渲染的所有路由将共享相同的 Footer。在您的示例中， Header 应呈现其子级。

现在，如果您想要有一个层次结构的 url，您需要指定每个路由。所以如果我想拥有/xxx/route_1 和/xxx/route_2，我需要指定它们：

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

根据您使用的版本可能会有一些差异，对于这个例子，我使用的是 react-route 3.0.2，但总的来说它的用法或多或少是相同的。

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

希望能帮到你。如果有不明白的地方或者你认为不正确的地方，请告诉我，我们可以讨论。

你可以看一下整个例子here，如果你想看看它的工作，你可以找到它here

【讨论】：

Indded，我想念孩子们。非常感谢。
很高兴为您效劳！！

【解决方案2】：

我认为您应该重定向您的 Link 标签，使其具有领先的 slash(/)，如下所示

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

【讨论】：

两种方法都试过了，都不行。实际上，直接将路径放在 URL 中只是触发 index.html。您指定的路线无关紧要。