react-router-dom 只更改 url

Question

I've made a website with a router-dom and unfortunately URL changes and I need to refresh the page to see right component.

I've already seen all the threads on StackOverflow and none of them helped me.

So, I have App.js as the main container:

<div>
  <Header />
  <Router>
    <Switch>
      <Route exact path="/" component={Index} />
      <Route path="/offer" component={Offer} />
    </Switch>
  </Router>
</div>

In header I have links:

<Router>
  <Link to="/">Start</Link>
  <Link to="/offer">Offer</Link>
</Router>

To App.js I import Router, Switch, and Route. To header.js I import Router and Link.

Everything is displayed by standard ReactDOM.render(, document.getElementById('root'));

Could you help me out, please?

Answer 1

You should only have one Router component, preferably as the topmost component of your app.

Example

function Header() {
  return (
    <div>
      <Link to="/">Start</Link>
      <Link to="/offer">Offer</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Index} />
          <Route path="/offer" component={Offer} />
        </Switch>
      </div>
    </Router>
  );
}

Answer 2

It's because Header is not inside the Router:

Try this:

<Router>
  <Header />
  <Switch>
    <Route exact path="/" component={Index} />
    <Route path="/offer" component={Offer} />
  </Switch>
</Router>

In Header component :

<div>
  <Link to="/">Start</Link>
  <Link to="/offer">Offer</Link>
<div>