了解 React 路由器参数

Question

我有一个静态路由 list 和一个动态路由 user/:id。 在 2 个页面之间导航会出现问题 (1) 当从 user/:id 导航到 list 时，它会将其附加为 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" />