I'm using React Router v4 with react-bootstrap. The problem is that the routing doesn't work when I try to click on "FrontPage" or "About" page when it is styled with react-bootstrap. If I take off the react-boostrap, the routing works fine. How can I fix it so that this works with react-boostrap?
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/frontPage'>frontPage</Link></li>
</ul>
<hr/>
<Route exactly path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/frontPage' component={FrontPage}/>
the above code will work however, the below code will not.
<Nav>
<NavItem><Link to='/frontpage' > Adventure</Link></NavItem>
<NavItem><Link to='/about' > About</Link></NavItem>
<hr/>
<Router exact path='/' component={Home}/>
<Router path='/frontpage' component={FrontPage}/>
<Router path='/about' component={About}/>
</Nav>
Error I get in console:
ReferenceError: path is not defined
at C:\Users\louis\desktop\testreact\server.js:24:23
at Layer.handle [as handle_request] (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\louis\desktop\testreact\node_modules\express\lib\router\index.js:281:22
at param (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\index.js:354:14)
at param (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\index.js:365:14)
at Function.process_params (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\index.js:410:3)
at next (C:\Users\louis\desktop\testreact\node_modules\express\lib\router\index.js:275:10)
at SendStream.error (C:\Users\louis\desktop\testreact\node_modules\serve-static\index.js:121:7)
at emitOne (events.js:96:13)
at SendStream.emit (events.js:188:7)
at SendStream.error (C:\Users\louis\desktop\testreact\node_modules\send\index.js:282:17)
at SendStream.onStatError (C:\Users\louis\desktop\testreact\node_modules\send\index.js:433:12)
at onstat (C:\Users\louis\desktop\testreact\node_modules\send\index.js:734:26)
To clarify the issue: If I do not style with react-boostrap, the routing will work as intended by switching to the desired routes when I click on frontpage and about page. However, once I wrap the routes with bootstrap tags, I cannot switch from one page to another. It returns as "Path is not defined".
dude you put Router not Route, unless that was intentional
https://reacttraining.com/react-router/web/api/Router
https://reacttraining.com/react-router/web/api/Route
Router does not accept path
Related
I have created the following routes using connected-react-router as shown below
<Switch>
<Route exact={true} path="/a" component={A}/>
<Route exact={true} path="/b" component={B}/>
<Route path="/c/:id" component={C}/>
</Switch>
But when I hit the url my.domain.com/c, the component does not get render. But when I go and give the url my.domain.com/c/12, then it works. I have tried setting exact={false} as well. Still it does not work. Any help will help me proceed further.
When you declare the route:
<Route path="/c/:id" component={C}/>
You are saying that the "id" it's mandatory. If you need render the page even if the user don't pass the id, you need to add "?":
<Route path="/c/:id?" component={C}/>
So I've got React Router set up and I'm trying to run it from WordPress.
The app routes correctly as long as you start from the root "/". However if you manually navigate to any subpage via the address bar, React Router seems to only take over from there.
For example.
Hitting / will render the homepage. If you click the link 'style-guide' it will correctly route you to /style-guide and render the page.
However, if you manually navigate to /style-guide in your address bar, react will render the homepage there, and if you now click the style-guide link it will bring you to /style-guide/style-guide
What I need to do is tell react-router to always start from the root URL.
My Routes Look Like this
import {
BrowserRouter as Router,
Route,
Redirect,
Switch,
} from 'react-router-dom'
import PageContainer from 'containers/pageContainer'
class RoutesList extends React.Component {
render() {
return (
<Router>
<div>
<Switch>
<Route path="/" component={PageContainer} />
<Route path="style-guide" component={PageContainer} />
<Route
render={() => {
return <Redirect to="/" />
}}
/>
</Switch>
</div>
</Router>
)
}
}
export default RoutesList
Make your routes exact paths
<Route exact path="/" component={PageContainer} />
<Route exact path="/style-guide" component={PageContainer} />
I'm using react-router rc6 in the following auth pattern:
const isLoggedIn = false
function requireAuth (nextState, replaceState) {
console.log(nextState.location.pathname)
if(!isLoggedIn) {
replaceState({ nextPathName: nextState.location.pathname }, '/login')
}
}
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={Main} onEnter={requireAuth}>
<Route path='login' component={Login} />
</Route>
</Router>
), document.getElementById('app'));
I've seen this as a common pattern, but according to https://github.com/rackt/react-router/issues/2773, I can't redirect in an onEnter hook because the function requireAuth above gets called in an infinite loop. How should I do it instead? I want to redirect to the /login page if not authenticated.
This is because the / onEnter handler tries to redirect to a route that executes the same / onEvent handler.
I.e. what happens is:
Router tries to handle request to / (first match of /login).
/ has an onEnter handler. Handler is executed.
Handler wants to navigate to /login.
Router tries to handle request to / (back to step 1).
So as you can see, the reason why you are getting a call stack exceeded error is because it is circular.
Try to change your routes to the following:
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={Main}>
<Route path='/login' component={Login} />
<Route path='/user' onEnter={requireAuth}>
<Route path='/profile' component={Profile}>
</Route>
</Route>
</Router>
), document.getElementById('app'));
This way only the routes that require authentication are protected behind your requireAuth handler.
If you'd rather have a simple auth solution for React, take a look at the React SDK for Stormpath that I've built.
It will take care of all of this. And instead of having to use hacky onEnter handlers, all you need to do is use the SDK's AuthenticatedRoute. E.g.
<Router history={createBrowserHistory()}>
<HomeRoute path='/' component={MasterPage}>
<IndexRoute component={IndexPage} />
<LoginRoute path='/login' component={LoginPage} />
<LogoutRoute path='/logout' />
<Route path='/verify' component={VerifyEmailPage} />
<Route path='/register' component={RegisterPage} />
<Route path='/forgot' component={ResetPasswordPage} />
<AuthenticatedRoute>
<HomeRoute path='/profile' component={ProfilePage} />
</AuthenticatedRoute>
</HomeRoute>
</Router>
The example above is a real-world example extracted from the React SDK example project. See: https://github.com/stormpath/stormpath-express-react-example/blob/master/src/app.js#L11-L23.
Let me know if this helped you.
I met a weird problem here, I am using a simple router set up like:
<Provider store={store}>
<div>
<Router
location='history'
history={createHistory({queryKey: false})}
onUpdate={() => window.scrollTo(0, 0)}>
<Route path="/" component={Main}>
<Route path="datacenter/:name" component={App} />
<Route path="operation" component={OperationComponent} />
</Route>
</Router>
<DevTools />
</div>
</Provider>
and I have a nav list that manipulates the History:
<SelectableList subheader='OPERATIONS' valueLink={{value: this.props.location.pathname, requestChange: this.operationChanged}}>
<ListItem primaryText='Checks' value='/operation' onTouchTap={this.handleClose}/>
</SelectableList>
with action callback:
operationChanged = (evt, val) => {
this.props.history.push(val);
};
the problem is the navigation is working, when I click one of the list item, I am navigated to the path as expected, however, the selected path is not being updated to browser's address bar ...
Any ideas?
Thanks in advance
UPDATE *********
Turns out, it is an issue related to webpack-dev-server, while using this dev tool, the react-router failed to update browser's location bar ... did not figure out why though
Could be because on the Router you are setting:
location='history'
Try removing that line, also a JSBin or plnkr would be helpful so I could play around with it!
check out the docs here and follow the basic setup: Check out the bottom of the second example!
I'm trying to implement the following routes in react-router:
<Route name='user' path='/:userId' handler={Profile}>
<DefaultRoute handler={Welcome}/>
<Route name='message' path='/:messageId' handler={Timeline} />
</Route>
I'm getting the following error in the console
Uncaught Error: Invariant Violation: You cannot nest path "/:userId" inside "/:messageId"; the parent requires URL parameters
Is there a way to nest multiple routes with parameters in react-router?
The problem was solved by removing the '/' in front of the path in the message route.
<Route name='user' path='/:userId' handler={Profile}>
<DefaultRoute handler={Welcome}/>
<Route name='message' path=':messageId' handler={Timeline} />
</Route>
May be set path="/user/:userId" ? Check example from https://github.com/rackt/react-router