react-router-dom 링크가 작동하지 않음

react-router-dom 링크가 작동하지 않음

나는 리액트루터에서 리액트루터돔으로 옮겨서 모든 오류를 수정했다.그러나 링크를 클릭하면 URL이 변경되지만 각 보기는 렌더링되지 않는다.

내 지원서의 구조는 다음과 같다.

인덱스 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));

Post https://stackoverflow.com/a/43811162/888181,에 언급된 바와 같이 Router와 함께 시도했지만 여전히 효과가 없다!

루트 경로를 맨 위로 이동하여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

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

태그 삽입된 NavLink 구성 요소를 사용하십시오. 태그가 작동 중임

지금은 조금 늦었지만 최근에 같은 문제가 있어서 당신의 질문을 우연히 접하게 되었고 이 기사가 도움이 되었다: https://reactrouter.com/docs/en/v6/api#route

<Router>
    <Route exact path="/" element={ <Content /> }/>
</Router>

이제 react-react-reason-dom v6도 Switch 요소를 경로로 교체했으므로 패키지 버전을 업그레이드하는 경우 https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes에 유의하십시오.

참조URL: https://stackoverflow.com/questions/44476918/react-router-dom-link-not-working