почему не работает response-router-dom после сборки?

Question

ссылки не работают после сборки, но работают на локальном хосте: 3000

Я использую компонент Reaction-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.

1-е решение: реакции - это одностраничное приложение, поэтому, когда вы создаете приложение, сервер знает только об index.html, поэтому для любого другого url васпридется configure сервер для fallback mechanism to index.html и после реакции приложение позаботится об обработке URL.

2-е решение : если вы используете hash router, то эта проблема не возникнет.
причина использования хеш-маршрутизатора Узнайте больше оhashrouter и его варианты использования

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>

попробуйте добавить этот способ, переключатель необходим для переноса компонента Route, надеюсь, это поможет вам