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

IT技术 reactjs react-router-dom
2021-05-24 23:39:34

链接在构建后不起作用，但它在 localhost:3000 中有效

我使用 react-router-dom 组件

使用以下方法构建项目：

npm run build

应用程序.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>

包.json

"homepage": ".",
2个回答

specific reason这种情况的背后有一个很深的原因。

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

第二种解决方案：如果您使用hash router，则不会发生此问题。
使用哈希路由器背后的原因是了解更多关于哈希路由器及其用例 

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

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 在 Material UI 对话框中形成表单 下一篇React Native：同步运行函数