Question

我从react-router转到react-router-dom并修复了所有错误。但是，现在单击链接时，URL正在更改，但相应的视图不会呈现。

这是我的申请结构：

index.js

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter>
        <App>
            <Switch>
                    <Route path="signin" component={Signin} />
                    <Route path="about" component={About} />
                    <Route path="signout" component={Signout} />
                    <Route path="signup" component={Signup} />
                    <Route path="thanks" component={Thanks} />
                    <Route path="tasks" component={ requireAuth(Task)  }/>
                    <Route path="/" component={ Content }/>

            </Switch>
        </App>
    </HashRouter>
  </Provider>
  , document.querySelector('.container'));

app.js

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                    {this.props.children}
                <Footer/>               
            </div>
        );
    }
}

export default withRouter(App);

header.js

class Header extends Component {

    showLoginButton() {
        if (this.props.authenticated) {
          // show a link to sign out
          return [<span className="loginBtn">
                    <Link to="/signout">Sign Out</Link>
                    </span>,
                <span className="loginBtn">
                    <Link to="/tasks">Tasks</Link>
                </span>
          ]
        } else {
          // show a link to sign in or sign up
          return [
            <span className="loginBtn" key={1}>
              <Link className="nav-link" to="/signin">Sign In</Link>
            </span>,
            <span className="loginBtn" key={2}>
              <Link className="nav-link" to="/signup">Sign Up</Link>
            </span>,
            <span className="loginBtn" key={3}>
                  <Link className="nav-link" to="/about">About</Link>
              </span>
          ];
        }
    }

    render() {
        return (
            <div className="header">
                <span className="logo">
                    <Link to="/" className="navbar-brand">company</Link>
                </span>
                {this.showLoginButton()}
            </div>
        );
    }
}

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated
  };
}

export default withRouter(connect(mapStateToProps)(Header));

我在帖子https://stackoverflow.com/a/43811162/888181中提到过试过了路由器，但是它仍然没有用！

Answer 1

尝试将根路径移到顶部，并确保将exact放在路径前面。此外，您应该将/放在其他路径上。

<Switch>
    <Route exact path="/" component={ Content }/>
    <Route path="/signin" component={Signin} />
    <Route path="/about" component={About} />
    <Route path="/signout" component={Signout} />
    <Route path="/signup" component={Signup} />
    <Route path="/thanks" component={Thanks} />
    <Route path="/tasks" component={ requireAuth(Task)  }/>
</Switch>

参考：https://reacttraining.com/react-router/web/api/Switch

Answer 2

import {NavLink} from 'react-router-dom';

使用标签的 NavLink 组件，对我来说它正在工作

react-router-dom链路不工作

2 个答案: