Как перенаправить на домашнюю страницу, если URL недействителен?

Question

Я использую React и React-router v4

Вот мой компонент маршрута:

<Switch>
              {/* <Route path='/blog' exact component={Blog} /> */}
              <Route path='/projects/:id' component={ProjectDetails} />
              <Route path='/career/:id' component={CareerDetails} />
              <Route path='/' component={withScrollPreservation(LandingPage)} />
              <Route component={withScrollPreservation(LandingPage)} />
            </Switch>

В чем мой вопрос:

Если пользователь вводит что-то, чтоне действителен из маршрутов, я хочу, чтобы он перенаправил на домашнюю страницуРассмотрим сценарий, который запускает это локально:

localhost:4000/ - домашняя страница

localhiost:4000/invalidurl - следует перенаправить обратно на localhost:4000/ и удалить недопустимый URL-адрес из URL

Есть мысли?

Answer 1

Если вы хотите перенаправить домашнюю страницу при вводе неверной строки пути, чтобы следовать этому коду ....

<Switch>
   <Route exact path="/" component={Home} />
   <Route path="/login" component={Login} />
   <Route path="/signup" component={Signup} />
   <Route path="/user" component={User} onEnter={this.requireAuth}/>
   <Route path="*" component={Home} />
</Switch>

здесь я использовал * в пути, что означает, что если неверный тип строки пути, то он автоматически перенаправляет на домашнюю страницу.

Answer 2

Вы можете использовать

import { Redirect } from 'react-router-dom';

и добавить этот маршрут в свой коммутатор:

<Route render={() => <Redirect to={{pathname: "/"}} />} />

Он будет перехватывать все, что не имеет маршрута.