Question

我有一个静态路由list和一个动态user/:id。在2个页面之间导航会产生问题（1）从list导航到user/:id时，会将其附加为user/list。 （2）在user/:id上刷新页面时，我得到Uncaught SyntaxError: Unexpected token < jquery-3.1.1.min.js:1，这会破坏所有样式。

如果我导航到的路线是list，如何告诉路由器不附加？

为什么在不刷新动态路由时会抛出jQuery SyntaxError？

import React, { Component } from 'react';
import { Router, Route, browserHistory, indexRoute } from 'react-router';

import Root from './components/Root';
import Home from './components/Home';
import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';

class App extends Component {
  render() {
    return (
        <Router history={browserHistory}>
          <Route path="/"  component={Root}>
          <indexRoute component={Home} />
          <Route path="list" component={ComponentA} />
          <Route path="users/:id" component={ComponentB} />
        </Route>
      </Router>
    );
  }
}

export default App;

修改：我发现these answers建议将type="text/jsx"添加到src。当我这样做而且我现在没有得到syntaxError但js（菜单下拉菜单，模态等）代码无效。

...
    <script type="text/jsx" src="./jquery/jquery-3.1.1.min.js"></script>
    <script type="text/jsx" src="./bootstrap/js/bootstrap.min.js"></script>
    <script type="text/jsx" src="./custom.js"></script>
  </body>

Answer 1

很可能您的链接未正确定义。您可能错过了/，它告诉路由器您正在尝试重置路径。

<Link to="/link" />

而不是

<Link to="link" />

了解React Router params

1 个答案: