react-router 4.0（四）跳转404

import React from 'react'
import ReactDOM from 'react-dom'
import {
  HashRouter,
  Route,
  Link,
  Prompt,
  Switch
} from 'react-router-dom'

const Other = ({location})=>(
  <h3>没有这个地址……{location.pathname}</h3>
)

export default class App extends React.Component {
  render(){
    return(
      <HashRouter>
        <div>
          <ul>
            <li><Link to="/">首页</Link></li>
            <li><Link to="/one">第一页</Link></li>
            <li><Link to="/two">第二页</Link></li>
          </ul>
          <Switch>
            {/* 渲染第一个被location匹配到的并且作为子元素的<Route>或者<Redirect>,
            当找到匹配的<Route>后会停止继续匹配 */}
            <Route path="/" exact render={()=><h3>首页</h3>}/>
            <Route path="/one" render={()=><h3>One</h3>}/>
            <Route path="/two" render={()=><h3>Two</h3>}/>
            <Route component={Other}/>
            {/* 不存在的url跳转渲染Other这个404组件 */}
          </Switch>
        </div>
      </HashRouter>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById("app"))

 

转载于:https://www.cnblogs.com/BlogRegisterboby/p/9293220.html