Question

链接在构建后不起作用，但在localhost：3000中起作用

我使用react-router-dom组件

使用以下项目构建项目：

npm run build

app.js：

    return (  
      <div>
        <Router >
          <Header/>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/join" component={Join}/>
              <Route path="/advertisement" component={Advertisement}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/details" component={Details}/>

        </Router>
      </div>
    );
  }

以及其他组件中的链接

<ul>
    <li><Link to='/'>home</Link></li>
    <li><Link to='/about'>about us</Link></li>
    <li><Link to='/join'>join</Link></li>
    <li><Link to='/advertisement'>ads</Link></li>
    <li><Link to='/contact'>contact us</Link></li>
</ul>

package.json

"homepage": ".",

Answer 1

在这种情况下有一个非常specific reason。

第一个解决方案： react是一个单页应用程序，因此在构建该应用程序时，服务器仅了解index.html，因此对于其他url您将需要configure服务器来fallback mechanism to index.html，并且在React应用程序处理URL处理之后。

第二个解决方案 ：如果您使用hash router，则不会发生此问题。
使用哈希路由器的原因是know more about hashrouter and it's use cases

import { HashRouter as Router, Route, Switch } from "react-router-dom"

Answer 2

import { Route, BrowserRouter, Switch } from 'react-router-dom';

从该库添加开关

  <div>
    <BrowserRouter >
       <Switch>
      <Header/>
          <Route exact path="/" component={Home}/>
          <Route exact path="/about" component={About}/>
          <Route exact path="/join" component={Join}/>
          <Route exact path="/advertisement" component= 
           {Advertisement}/>
          <Route exact path="/contact" component={Contact}/>
          <Route exact path="/details" component={Details}/>
     </Switch>
    </BrowserRouter>
  </div>

尝试添加这种方式，需要使用switch来包装Route组件，希望这会对您有所帮助

为什么建好后不工作react-router-dom？

2 个答案: