react-router-v4

问题 Im using React Router. In my state I have a number of TV shows identifiable by an ID. On the shows page I need to load the data for the specific show, matching the show ID to the end of the URL. My state looks something like this but with more shows: shows: [ { id: 1318913 name: "Countdown" time: "14:10" }, { id: 1318914 name: "The News" time: "15:00" } ] In App.js: <BrowserRouter> <Switch> <Route exact path="/" render={() => { return <Table shows={this.state.shows} />; }} /> <Route path="

问题 I used this NavLinks in the main menu. The issue is that when '/Test/car' link is clicked '/Test' link is also applying the styles. I believe it's because '/Test' suppose to be the root of other links. so it make sense. But I want '/Test' link also to work like other links when applying the active style. So '/Test' will get applied the styles only when that 'Home' link is clicked. How I get that done (in a reactjs way)? <Route exact path="/TEST" component={Home}></Route> <Route path="/TEST

问题 The main problem is while code splitting with react-routerV4 and then webpack 2, I have modules that are in several chunks that I can't get to the main one. My configuration is as follow : Webpack 2.2.1 React-route 4.1.1 I'm using the code splitting as in the react-router v4 documentation Basically, I don't use the import, but on the route configuration I have : something like this : import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home'; [ { path: url1, component:

问题 This is essentially all my code. I am running Hapi and trying to use react-loadable to server render my React application. I have added a lot of the missing pieces to the code here. const location = req.url.pathname const context = {} const modules = [] const Router = () => ( <Switch> <Route exact path="/" component={Home} /> <Route path="/login" component={Login} /> <Route path="/me" component={Profile} /> <Route component={NotFound} /> </Switch> ) const App = () => ( <StaticRouter location=

问题 I am writing a small app with a navigation bar and 5 routes using react-router-dom 4.1.1 . When I click on a link in the navigation bar, the URL in the Firefox address bar updates, but the page displayed does not change. However, if I enter the address of a subpage in the address bar, the correct page is displayed. app.js: render( <Provider store={store}> <HashRouter> <MainContainer /> </HashRouter> </Provider>, document.querySelector('.app') ); Main.js: render() { return ( <div className=

问题 UPDATE : react-navigation web support is done. follow this: https://reactnavigation.org/docs/en/web-support.html ORIGIN : I try to share my code between react-native and web. when I try react-native-web, it works well. but there is only one question, how to access the specific screen from URL? I read the react-navigation docs, there nothing about that. and react-router-native can catch the web URL, but it has navigator likes StackNavigator/DrawerNavigator. and idea about that? 回答1: I don't

问题 Users redirected to my app after login (server on java), and they have url, which looks like this http://10.8.0.29:8083/html/?locale=RU&token=1c5c71f2-dcda-4a51-8cf6-f8f6ff1031d0&returnTo=http://10.8.0.23:8080/ (with some params, html - is folder where sources located). I need to preserve this params while navigate on my app. So far I didn't found any simple solution to this problem except this How to redirect with react-router while preserving initial query parameters? old question, so I

问题 I have the following two routes: /items and /items/buy . Each route corresponds to a Tab in a single view. Both routes are rendered with an exact prop, but still, two tabs are being marked as active when navigating to /items/buy . I already tried using withRouter , but I noticed changing /items to /items/sell fixes the problem, but I don't wanna have that route. I understand rrv4 is matching the first part of my route /items and the other route too /items/buy , but I think that shouldn't be

问题 I have this following code: import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const Routes = () => ( <Router basename="/blog"> <div> <Header /> <Route exact path="/" component={Main}/> <Route path="/article/:id" component={ArticleView}/> </div> </Router> ) I can access history or match via props in the Main and ArticleView component. But I cannot access it in the <Header /> . Is there a way to get the history object in the Header component? 回答1: You can use the

问题 I have been able to get this to work with a single file, but moving routes to a route.js results in the component not being rendered. Clearly I am missing something. I have looked at a lot of tutorials but they seems to all be for React Router < v4.0 index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; import { AppContainer } from 'react-hot-loader'; import routes from './routes.js'; ReactDOM.render(