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

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

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组件，希望对你有帮助

Answer 2

这个场景的背后有一个非常specific reason。

第一个解决方案： React 是一个单页应用程序，因此当您构建应用程序时，服务器只知道 index.html 所以对于任何其他 url 你将不得不 configure 服务器 fallback mechanism to index.html 并且在 React 应用程序将负责 url 处理之后。

第二个解决方案：如果您使用hash router，则不会出现此问题。
使用散列路由器的原因是

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

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

why don't work react-router-dom after build?

reactjs

react-router-dom