反应路由器v4默认页面(未找到页面)

Question

这是常见的目的,指向不发布页面的不匹配请求.

使用react-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="*"代表所有请求和未发现的组件总是在那里,但我怎么能说隐藏这个组件的有效网址路径？

Answer 1

React Router的No Match文档涵盖了这一点.您需要导入<Switch>组件,然后您可以path完全删除该属性.

A <Switch>呈现<Route>匹配的第一个孩子.<Route>没有路径的A 总是匹配

这是使用的示例:

<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声明中加入.

Answer 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>

这项工作对我来说很完美。谢谢。