路由没有在 React 路由器版本 4 中发生

Question

这次我可能犯了愚蠢的错误，但我明白了。我从 react router v4 开始，但我的路由没有发生。我尝试手动点击 url 以及通过按钮点击没有结果。这是我的路线配置。仅供参考，我正在使用 LinkContaier 进行重定向

import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStores';
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import HeaderContainer from "./containers/HeaderContainer"
import ProgramProfileContainer from "./containers/ProgramProfileContainer"
const store = configureStore();


ReactDOM.render(
  <Provider store={store}>
     <BrowserRouter >
      <Switch>
        <HeaderContainer/>
        {/* <Route exact path="/" component={HeaderContainer}/> */}
          <Route path="program-profile/:program_id" component={ProgramProfileContainer}/>   
      </Switch>
    </BrowserRouter>
  </Provider>, document.getElementById('root')
);

这是我的容器

import React from "react"
import { connect } from 'react-redux';

export default class ProgramProfileContainer extends React.Component{

    render(){
        console.log("program profile")
        return(
            <h1> this is profile </h1>
        )
    }
}

我像 program-profile/3 一样点击了 url 但在控制台中也没有显示任何错误

Answer 1

不要在浏览器路由器中使用 switch :

ReactDOM.render(
   <Provider store={store}>
      <BrowserRouter >
        <div>
           <Route exact path="/" component={HeaderContainer}/>
           <Route path="/program-profile/:program_id" component={ProgramProfileContainer}/>   
       </div>
     </BrowserRouter>
 </Provider>, document.getElementById('root')
);

Answer 2

你的回答好像没问题。但这是我通常的做法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';

import reducers from './reducers';
import ProgramProfileContainer from "./containers/ProgramProfileContainer"

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="program-profile/:program_id" component={ProgramProfileContainer} />
            <Route path="/" component={IndexPage} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

使用Link时应该是这样的

<Link to={`/posts/${post.id}`}>
  {post.title}
</Link>

如果您在控制台中有任何错误消息，请post它们以便我们可以进一步帮助您。希望这可以帮助。编码愉快。

路由没有在 React 路由器版本 4 中发生

routing not happening in react router version 4

reactjs

react-redux

react-router-v4

react-router-dom