Question

我正在使用这些路线的反应路由器：

let routes = [{
  path : homePath,
  component : Layout,
  indexRoute: { component : Home },
  childRoutes : [
    {
      path : "translations",
      component : Translation,
    },
    {
      path : "articles",
      component : Articles,
    },{
      path : "article/:id",
      component : Article,
    },
    {
      path : "contact",
      component : Contact,
    },
  ],
}];
ReactDOM.render(
  <Router routes = {routes} history = {rRouter.browserHistory}>
  </Router>
  ,app);

组件：

class Articles extends React.Component{
  render(){
    return(
      <h1>Articles</h1>
    );
  }
}
class Article extends React.Component{
  render(){
    console.log(this.props);
    return(
      <h1>Article</h1>
    );
  }
}

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>HYassin</title>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>
    <link href='http://yui.yahooapis.com/pure/0.6.0/pure-min.css' rel='stylesheet' type='text/css'/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="http://localhost/Hyassin/src/css/main.css" rel="stylesheet" type="text/css"/>
    <!--  React stuff  -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react-router/2.7.0/ReactRouter.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/superagent/2.2.0/superagent.js"></script>
    <script src = "https://unpkg.com/mobx@2.5.1/lib/mobx.umd.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

  <body>
    <div id = "webapp"></div>
    <script src = "./src/js/bundle.js"></script>
  </body>
</html>

.htaccess

RewriteEngine On
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]
  RewriteRule ^ /index.php [L]

如果我尝试转到路径localhost / articles它工作正常，但是如果我尝试使用localhost / article / 1它会给我以下错误Uncaught SyntaxError: Unexpected token <。组件和路由在同一个js文件中。这个错误的原因是什么？谢谢你的时间。

Answer 1

事实证明问题是由我添加脚本文件的方式引起的。而不是src = "/src/js/bundle.js"我必须更改为src ="http://localhost/src/js/bundle.js"

React路由器不返回动态路径

1 个答案: