Question

我一直在Apache上运行React应用程序，其中不同的应用程序存储在各自的子目录中（即App1 =＆gt; company.com/app1 ）。应用程序一直运行没有问题，但我想进入React Router。

但是，由于模板托管在子目录中而复制basic template和solving the initial deep linking issue后，我发现表面级直接链接可以使页面正常（即company.com/template /主题）但更深入（即company.com/template/topics/rendering）并加载空页面并在控制台上提示以下错误消息：

Uncaught SyntaxError: http://www.company.com/template/topics/rendering/main.js : Unexpected token (1:1)
 1 | <!DOCTYPE html>
   |  ^
 2 | <html>
 3 |     <head>
 4 |         <meta charset="UTF-8">
    at Parser.pp.raise (browser.min.js:41)
    at Parser.pp.unexpected (browser.min.js:42)
    at Parser.pp.jsxParseIdentifier (browser.min.js:43)
    at Parser.pp.jsxParseNamespacedName (browser.min.js:43)
    at Parser.pp.jsxParseElementName (browser.min.js:43)
    at Parser.pp.jsxParseOpeningElementAt (browser.min.js:43)
    at Parser.pp.jsxParseElementAt (browser.min.js:43)
    at Parser.pp.jsxParseElement (browser.min.js:43)
    at Parser.parseExprAtom (browser.min.js:43)
    at Parser.pp.parseExprSubscripts (browser.min.js:40)

我的脚本如下：

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <script src="https://unpkg.com/react-router@4.2.0/umd/react-router.js"></script>
    <script src="https://unpkg.com/react-router-dom@4.2.2/umd/react-router-dom.js"></script>

</head>
<body>
    <div id="root"></div>
    <script type='text/babel' src='main.js'></script>
</body>

main.js

// required for ReactRouter V4
console.log(window.ReactRouterDOM)
const BrowserRouter = window.ReactRouterDOM.BrowserRouter
const Route = window.ReactRouterDOM.Route
const Link = window.ReactRouterDOM.Link
const NavLink = window.ReactRouterDOM.NavLink
const Prompt = window.ReactRouterDOM.Prompt
const Switch = window.ReactRouterDOM.Switch
const Redirect = window.ReactRouterDOM.Redirect

const BasicExample = () => (
    <BrowserRouter basename='/template'>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </BrowserRouter>
  )

  const Home = () => (
    <div>
      <h2>Home</h2>
    </div>
  )

  const About = () => (
    <div>
      <h2>About</h2>
    </div>
  )

  const Topics = ({ match }) => (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.url}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.url}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  )

  const Topic = ({ match }) => (
    <div>
      <h3>{match.params.topicId}</h3>
    </div>
  )

ReactDOM.render(<BasicExample/>, document.getElementById("root"))

的.htaccess

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

# Fallback all other routes to index.html
RewriteRule ^ /template/index.html [L]

我不太确定如何修改路由器模板，以便用户可以直接链接到相应的页面。这里有人可以建议解决这个问题吗？

非常感谢！

客户端React路由器：无法深层链接

0 个答案: