Ожидаемая маршрутизация не работает с React Router

Question

Я делал что-то подобное в других проектах, но по какой-то причине он не работает в моем текущем проекте.

<Switch>
 <Route path="" exact render={() => <div>home</div>} />
 <Route path="/explore" render={() => <div>explore</div>} />
 <Redirect to="/" />
</Switch>

Это должно отображаться при посещении / исследовании. При посещении чего-либо еще, он должен перенаправить на /. Но это не работает.

версии:

"react": "^16.13.0",
"react-dom": "^16.5.2",
"react-router-dom": "^5.1.2",

Я где-то совершаю глупую ошибку?

Answer 1

https://codesandbox.io/s/react-router-routing-srn83

Если вы используете точный , то нет необходимости использовать Switch . Причина, по которой он не работает, заключается в том, что свойство пути в первом маршруте не может быть пусто , оно должно содержать "/" .

<Switch>
 <Route path="" exact render={() => <div>home</div>} />
 <Route path="/explore" render={() => <div>explore</div>} />
 <Redirect to="/" />
</Switch>

без точно

<Switch>
 <Route path="/explore" render={() => <div>explore</div>} />
 <Route path="" render={() => <div>home</div>} />
 <Redirect to="/" />
</Switch>