Question

我创建了一个简单的应用程序，我尝试在其中使用react-router，但是我遇到了问题。当用户单击注册或登录时，页面应呈现必要的形式，但现在要进行页面更改，用户必须刷新页面，然后页面更改组件，我不知道为什么。

width: 100%

应用类：

导航栏类：

ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root'))

Answer 1

您必须将BrowserRouter作为顶级组件。 nav是触发必须渲染哪些组件的地方。

ReactDOM.render(<App />, document.getElementById('root'));

App.js

class App extends React.Component {
  render() {
    return (
      <div className="App">
           <Navbar/>

           <Router>
                <BrowserRouter>
                    <Switch>
                        <Route path="/Register" component={Register}  />
                        <Route path="/Login" component={Login}  />
                    </Switch>
                </BrowserRouter>
            </Router>
      </div>
    );
  }
}

Nav.js

class  Navbar extends React.Component {
 render(){
    return (
        <Nav bsStyle="tabs"> 
            <LinkContainer to="/login" >
                <NavItem >
                        LogIn
                </NavItem>
            </LinkContainer>
            <LinkContainer to="/Register" >
                <NavItem >
                    Register
                </NavItem>  
            </LinkContainer>
        </Nav> 
    ) 
}}

Answer 2

您在Navbar组件中放置了路由，这将无法正常工作。

将index.js更改如下：

ReactDOM.render((
    <BrowserRouter>
        <Switch>
          <Route path="/Register" component={Register}  />
          <Route path="/Login" component={Login}  />
          <Route path="/" component={App} />
        </Switch>
     </BrowserRouter>
), document.getElementById('root'))

应该可以，如果有任何问题，请通知我。还要从导航栏中删除BrowserRouter元素和子元素

Answer 3

在路由器内部使用BrowserRouter

<Router>
   <BrowserRouter>
      <Switch>
...
      </Switch>
   </BrowserRouter>
</Router>

React Router V4正在更新URL，但没有刷新页面

3 个答案: