I am using material-ui in my django project. I have different components to show different contents.
There is a button in my home page. When a use click on that button, I am trying to route him to signup page.
This is my button:
<RaisedButton containerElement={<Link to="/signup" />}
label="GET STARTED" backgroundColor="#00BCD4"
labelColor="#ffffff" style=`{buttonStyle} />
And this is my router setting:
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="signup" component={SignUp} />
</Route>
</Router>), document.getElementById('app'));
The default page : http://127.0.0.1:8000/ is showing the index 'home' component but, when the user click the button, the not found page is opened from the django.
Did I miss anything to setup?
I was not able to reproduce your issue with the details you provided. You can look at the what I set up here: http://www.webpackbin.com/NJcI-Lbo-
I did notice that there a typo in your first code snippet (there is an unnecessary backtick). But I'm assuming that this was just a typo when entering into stackoverflow, as this shouldn't be causing the behavior you described.
style=`{buttonStyle}
It does not seem like this is related to <Link /> and <RaisedButton />. Instead, it sounds like there may be some configuration issue from your local web server's end.
Does going directly to http://127.0.0.1:8000/signup work?
Related
I have a React Route with significant user input that I want to use the Prompt component with. I'm importing it from react-router-dom without error and adding the component to the render method of the class component, but no matter what, the prompt alert never actually appears and the user can freely navigate off the page without seeing any alert.
I've tried:
Putting the component in with when={aStateBooleanVariable} as well as when={true} and no when attribute at all.
Using a function for the message.
Ensuring that the Route it's on is an exact path.
Importing it from react-router instead of react-router-dom.
Moving the component around within the render method.
Moving the Prompt into the actual Switch statement itself in the App component that wraps everything in BrowserRouter.
Nothing I've tried has gotten the prompt to actually show up or prevent the user from navigating off the page and I've been unable to find anything in the docs or extensive searching where anyone else has had this problem. Does anyone have any idea why this just isn't even starting to work?
I'm not really sure what code to put since it's all pretty much boilerplate react-router-dom.
This is my App.jsx switch statement:
return (
<BrowserRouter>
<header>
{loggedInUser ? <NavbarComp loggedInUser={loggedInUser} setLoggedInUser={setLoggedInUser} /> : null}
</header>
<Switch>
<PrivateRoute path="/ged/campaigns/new" component={CampaignNew} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/campaigns/:id" component={Campaign} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/characters/new" component={CharGen} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/characters/:id" component={CharacterMain} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged" component={GEDHome} loggedInUser={loggedInUser} />} />
<Route path="/" component={Home} loggedInUser={loggedInUser} setLoggedInUser={setLoggedInUser} />} />
<Route component={DeadPage} />
</Switch>
</BrowserRouter>
)
I'm importing the component as:
import {Prompt} from 'react-router-dom';
And incorporating the component at the top of its parent's render method return:
<Prompt message="You have changes that will be lost if you leave without saving." />
What other code might be making it fail silently like this?
Hi every one I am trying create new page in react in this way.
I Have component which name is "SolutionsSectionsPic".
And I want after clicking on that component open another component (which name is "SItem" ) in new page (not in new tab). I am writing something like this
<Router>
<Link to="/ecommerce">
<SolutionsSectionsPic />
</Link>
<Route path="/ecommerce" component={SItem} />
</Router>
But when I click on "SolutionsSectionsPic" component, my "SItem" component immediately appears under "SolutionsSectionsPic" component.
How can I fix it?
This is because your Link will always be rendered no matter what. A solution to this is wapping your Link in a Route, that way it will only be rendered on that route.
<Router>
<Route path="/" exact>
<Link to="/ecommerce">
<SolutionsSectionsPic />
</Link>
</Route>
<Route path="/ecommerce" exact component={SItem} />
</Router>
You also see that I use exact, that means that only / will be valid, otherwise all routes that start with / will be valid.
I'm trying to make a site that is fully protected behind a login page. Once the user has logged in, they are redirected to the main page, which has a completely different layout.
MainLayout (includes header, sidebar etc.)
LoginLayout (centers everything on the page, but doesn't include the above elements)
FutureLayout (I want to be able to use different layouts for different pages later)
At the moment, the biggest problem I'm facing is that every time I change my route, everything rerenders. I sort of understand why this is happening, but I've been unable to find a way around it.
Here is some of my current progress
First thought
https://codesandbox.io/s/6l10v4o7jn
const HomePage = () => (
<MainLayout>
<h1>HOME PAGE</h1>
</MainLayout>
);
This obviously doesn't work because every time you move to another page, the Pagererenders the Layout. You can see this in action by toggling the green button on either HomePage or AboutPage then switching routes
Second Thought
https://codesandbox.io/s/moj437no58
<Route render={() => (
<MainLayout>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
</MainLayout>
)} />
<Route render={() => (
<LoginLayout>
<Route path="/login" component={LoginPage} />
</LoginLayout>
)} />
This fixes the state problem, but of course it renders both layouts because there's noting telling it not to, but the page is still determined by the router, as expected.
In a real application, those routes would be extracted to their own component like <AuthRoutes> and <PublicRoutes>
Why some solutions might not work
I'm also planning on using connectedRouterRedirect from redux-auth-wrapper to deal with protecting my routes, which can be a problem when using some of the suggestions I've found.
This I believe is because how the wrapper works as a HOC in conjuntion with Route's component prop
i.e <Route component={mustBeAuth(Page)} />
Conclusion
I've been stuck with this for a while, and I feel like I'm getting confused with various techniques and suggestions. Hopefully someone here can have a fresh take on it and perhaps help me figure out a solution.
Following the examples provided here https://reacttraining.com/react-router/examples/url-params.
I constructed my own route for my website like so:
<Router>
<div>
<Route path='/' exact component={Layout} />
<PublicRoute authed={this.state.authed} exact path='/login' component={Login} />
<PublicRoute authed={this.state.authed} exact path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
<Route path='/cachaca/:bottle' component={Layout} />
<Route render={() => <h3>No Match</h3>} />
</div>
</Router>
That is pretty similar to the example given except for the fact that the navigation (or link to) is somewhere else in the page.
The route itself is working perfectly. I can get match information, i can sucessfully check whether a user is logged in or not and so forth.
My only problem is that the URL bar isn't changing to reflect the navigation changes, so if I am sitting at localhost:3000/cachaca/1234 and click to go home, the home page will load but the URL bar will still show 'localhost:3000/cachaca/1234'.
I've seen similar posts to mine from react router 2/3 that seem to indicate that the history prop is what's causing this issue - but I don't believe that to be the case in Router 4.
In addition to that, the example in the react training website works and mine (which seems to be following the same steps) does not.
Am I missing something here? Why am I not getting the same results as in the training website.
Here is the navigation link I am using:
<Link to={"/"}>Home</Link>
Appreciate any help,
Thanks!
Wow, this is silly - but I wasted my entire day in this so will post this in the hope of saving someone else some time:
Turns out it wasn't working because I was doing my testing on the webpack-dev-server/ folder and react-router 4 seems to have a problem with that.
As soon as I went from http://localhost:3000/webpack-dev-server/cachaca/asdf to http://localhost:3000/cachaca/asdf the website started behaving as it should - both in content and its location in the URL bar.
Happy coding to all!
Why does the following <Link> not work?When I click on it, I see the URL changes for a slight moment and then it turns back to the current URL, nothing happens on view. I can also see in the Developer Tool the log message: action # 14:36:52.677 ##router/LOCATION_CHANGE
My route definition is:
<Route component={MainLayout}>
<Route path="/">
<IndexRoute component={TestIndexView} />
<Route path="test/:code/edit" component={TestFormView} />
</Route>
<Route path="*" component={NoMatch}/>
and the Link is:
<Link to={`test/${item.code}/edit`} className="btn btn-default btn-xs">Edit</Link>
I suppose it should render TestFormView when I click on the link but it does not.
I have discovered the issue. I configured my project to use redux-simple-router instead of react-router-redux, that's why it did not work. After changing to react-router-redux and import its routerReducer module, everything seems to be fine now.