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="*"表示所有请求和notfound组件始终存在，但我怎么能说隐藏此组件的有效URL路径？

Answer 1

React Router的No Match documentation涵盖了这一点。您需要导入<Switch>组件，然后才能完全删除path属性。

<Switch>呈现匹配的第一个孩子<Route>。没有路径的<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。

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>

对我来说，完美的工作。谢谢。

Answer 3

尽管accept解决方案确实提供了答案，但是当您嵌套了Routes时，它将不起作用

例如，如果class zzz extends Application{ public static void main (String[] args){ Launch(args); } public void start(Stage s){ // bla di bla s.setOnCloseRequest((event) -> {// <----------- this is what you need Platform.exit(); } }组件具有Home，/home之类的嵌套路由，并且如果访问的URL为/dashboard，它将显示/db组件仅位于“路线”部分中，而不是整个页面。

为避免这种情况，您可以通过一个非常简单的调整来使用组件和提供程序

NotFound

然后您可以像使用它

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;

并在Home组件中

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>

Answer 4

此方法效果很好，如果网址不存在或为假，则可以进行重定向

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/sorties-scolaires" component={SortiesScolaires} />
        <Route path="/voyages-entreprise" component={VoyagesEntreprise} />
        <Route path="*">
          <Redirect to="/" />
        </Route>
      </Switch>
    </Router>
  );
}

Answer 5

它对我不起作用，尤其是使用此config

所以，我必须检查Homepage组件的render函数中的路径。像这样：

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

反应路由器v4默认页面（未找到页面）

5 个答案: