Отредактировать страницу маршрутизатора v4 по умолчанию (страница не найдена)

Это обычная цель, направляющая запрос unmatch на неподтвержденную страницу.

сделать это с помощью action-router v4 выглядит как предыдущие версии, и я ожидаю, что это образец работает ниже. Ссылки работают нормально, но я ожидаю, что компонент NotFound будет вызван только неизвестным запросом url; но его всегда там.

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

его, так как path="*" представляет весь запрос и неотработанный компонент всегда, но как я могу скрыть этот компонент для действительного URL-адреса?

Ответ 1

React Router Нет документации соответствия. Вам нужно импортировать компонент <Switch>, тогда вы можете полностью удалить атрибут path.

A <Switch> отображает первый дочерний элемент <Route>, который соответствует. A <Route> без пути всегда соответствует

Это пример, который использует:

<Router>
  <div>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

Итак, в вашем случае просто снимите path="*" и введите <Switch>:

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

Не забудьте включить Switch в оператор import вверху.

Ответ 2

это мое решение с двумя компонентами.

const NotFound = () => <div>Not found</div>

const NotFoundRedirect = () => <Redirect to='/not-found' />

//root component
<Switch>
 <Route path='/users' component={UsersPages} />
 <Route path='/not-found' component={NotFound} />
 <Route component={NotFoundRedirect} />
</Switch>

//UsersPages component
<Switch>
 <Route path='/home' component={HomePage} />
 <Route path='/profile' component={ProfilePage} />
 <Route component={NotFoundRedirect} />
</Switch>

Ответ 3

Хотя решение accept дает ответ, но оно не будет работать, если у вас есть вложенные маршруты

Например, если у компонента Home есть вложенные Маршруты, такие как /home, /dashboard и если посещенный URL-адрес - /db, он будет показывать компонент NotFound только в разделе Route, но не на странице в целом.

Чтобы избежать этого, вы можете пойти с очень простой настройкой использования компонента и провайдера

const NoMatch = (props) => (
    <Redirect to={{state: {noMatch: true}}} />
)

const ProviderHOC = (NotFoundRoute) => {
    const RouteProvider = (props) => {
        if(props.location && props.location.state && props.location.noMatch) {
           return  <NotFoundRoute {...props} />
        }
        return props.children;
    }
    return withRouter(RouteProvider)

}

export default ProviderHOC;

И тогда вы можете использовать его как

const RouteManager  = ProviderHOC(NotFoundComponent);

<Router>
  <RouteManager>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <NoMatch />
    </Switch>
  </RouteManager>
</Router>

и внутри домашнего компонента

render() {
    return (
         <Switch>
               <Route path="/home" component={NewHome} />
               <Route path="/dashboard" component={Dashboard} />
               <NoMatch />
         </Switch>
    )
}

Ответ 4

Это не работает для меня, особенно один использует config

Итак, я должен проверить путь в функции рендеринга компонента "Главная". Что-то вроде этого:

render(){
const {match, location, history} = this.props;
if (location.pathname === '/'){
return (<div>Home</div>)
}else{
return null
}
}