路由没有在 React 路由器版本 4 中发生
routing not happening in react router version 4
这次我可能犯了愚蠢的错误,但我明白了。我从 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 但在控制台中也没有显示任何错误
不要在浏览器路由器中使用 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')
);
你的回答好像没问题。但这是我通常的做法。
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 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 但在控制台中也没有显示任何错误
不要在浏览器路由器中使用 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')
);
你的回答好像没问题。但这是我通常的做法。
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它们以便我们可以进一步帮助您。希望这可以帮助。编码愉快。