Question

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

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

当我想使用react-router时会出现问题。使用此设置只有根＆＃39; /＆＃39;路由触发器和所有子路由重定向到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')
)

Answer 1

除非我在这里遗漏了一些东西，否则Root路线应该渲染自己，但也会渲染它的孩子。在您的示例中，Header只是渲染itsefl。

这是我的一个工作示例：

<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应该呈现其子项。

现在，如果您想要的是具有网址层次结构，则需要指定每个路由。因此，如果我想要/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，但在一般情况下，其使用情况大致相同。

我不知道您使用的是哪个版本，但您可能还需要参考路由添加＆＃39; /＆＃39;之前。

我希望能帮助你。让我知道如果你有什么不明白或者你认为不对，我们可以讨论一下。

您可以查看整个示例here，并希望看到它正常工作，您可以找到它here

Answer 2

我认为您应该将Link标记重定向为具有如下所示的前导slash(/)

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

react-router和express子路由不会触发

2 个答案: