Question

我正在使用反应路由器4.我有两个组件1- ShopLogin 2- Shopper。我想在按钮点击后从ShopLogin组件重定向到Shopper组件。一切都很好。点击按钮后，URL也会发生变化。我也能看到'你好'。但问题是我可以在按钮点击后在浏览器上看到这两个组件。组件不令人耳目一新。不知道为什么会这样。以下是我的代码。

import React from 'react';
import PropTypes from 'prop-types';


export class ShopLogin extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    };
}
SignIn(e) {
    e.preventDefault();
    this.context.router.history.push('/shopper');

}

render() {
    return (
        <div>
        <button onClick={this.SignIn.bind(this)}>SignIn</button>
        </div>
    );
    }
   }

ShopLogin.contextTypes = {
router: PropTypes.object
}


export default ShopLogin;

我的Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import ShopLogin from './ShopLogin';

import Shopper from './Shopper';

import { HashRouter,Route } from 'react-router-dom';


 ReactDOM.render((

 <HashRouter>

  <div>

  <Route path="/" component={ShopLogin} />

  <Route path="/shopperlogin" component={ShopLogin} />

  <Route path="/shopper" component={Shopper} />

   </div>
 </HashRouter>
   ), document.getElementById('root'))

我的Shopper.js

import React, { Component } from 'react';


export class Shopper extends Component {

 constructor(props) 
{

super(props);

   this.state = {
    };

}

 render() 
 {

return (
  <div>
 Hello   </div>
);
}
}


export default Shopper;

Answer 1

它将在路线'/shopper'上显示多个组件。 Routes使用路径'/'成功检查ShopLogin组件，并使用路径'/shopper'成功检查Shopper组件。

我会创建一个父组件，例如Main只显示子组件并定义这样的路由

从react-router

导入IndexRoute

import { HashRouter,Route, IndexRoute } from 'react-router-dom';

使用您的路线

<HashRouter>
    <Route path='/' component={Main}>
        <Route path='/shopper' component={Shopper} />
        <IndexRoute component={ShopLogin} />
    </Route>
</HashRouter>

为ShopLogin和Shopper组件创建父组件

class Main extends Component {
    render(){
        return (
            <div>
                {this.props.children}
            </div>
        )
}

Answer 2

尝试重新排序您的路线并使用完全属性并使用切换包装所有路线。

@Html.RenderAction("Filter", "YourController")

URL更改但页面不刷新

2 个答案: