reactjs 路由的replace和history

 const customHistory = createBrowserHistory();

 

  return (

    <div className="wrap"> 

        <Music />

      <Router history={customHistory} >

  ....

这样，在子组件里，可以用this.props.history

------------------

这样，在组件中：

  
  componentWillMount (event) {
  console.log(this.props)
  if(this.props.location.pathname!='/') {
     // window.location.href='/';   ---这也是问题，不能这样。因为link进来时，也会跳到首页。而且也不应该在这里判断。而是要在 外围。比如app.js
     //this.props.history.replace('/')
  }
  //console.log(this.props.location.pathname)
  //if(this.props.location.pathname)
   //this.props.history.replace("/")
 //  this.props.history.replace("/begin2")
  console.log(`begin2  location: ${document.location}, state:  `)
}

 

 

-------------

 

 使用createBrowserHistory ，判断当前不是首页，刷新时要跳到首页。
import { createBrowserHistory } from "history";

function App() {
......

 const customHistory = createBrowserHistory();
 console.log(customHistory);
if(customHistory.location.hash != ""){
  customHistory.replace("/")  // replace不记录history。并跳转。
}

------------------

另外网址要localhost:3000/#/begin   , 而不是   localhost:3000/begin 

虽然在测试时， localhost:3000/begin 可以，这是因为nodejs伪静态。而发布build后。如果web server不支持伪静态时，就404

所以，在做单页面时，要用 localhost:3000/#/begin 

实现这点也简单，用 https://reacttraining.com/react-router/web/api/HashRouter

  把<Router> 换成 <HashRouter>

----------------

如果不是单页面，则反而不需要这么麻烦。