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.
Related
I'm trying to create an independent Route (not sure if that's the correct term) at BulletinBoard.js where I can use Link to go to Create Bulletin component.
I'm also trying to create another independent Route at BulletinList.js where I can navigate to Edit Bulletin with their respective IDs.
Before this, I tried using useRouteMatch with path and url, but apparently that wasn't the correct way to do it, now I'm told to use useLocation, it does adds the /createbulletin and /editbulletin/id paths behind the current URL, but it doesn't navigate to the component itself.
I've been cracking my head over this for the past 2 days and I still haven't figured out the correct way to do this.
Here is the codesandbox that I've created for reference.
The reason your code didnt navigate to a different component after the url changed is because you didnt use the exact attribute when declaring the route. So its matching /bulletinboard/anything and then it always renders de BulletinBoard component.
You could define all routes at the App.js file like
<Switch>
<Route path="/" component={Home} exact />
<Route path="/bulletinboard" component={BulletinBoard} exact />
<Route path="/bulletinboard/edit/:id" component={EditBulletinBoard} exact />
<Route path="/infohub" component={InfoHub} exact />
<Route component={NotFound} />
</Switch>
Also, check out the useHistory hook
So at the BulletinBoard.js when the user clicks the link
onClick={() => history.push(`/bulletinboard/edit/${id}`)}
Note that the edit route renders a different component that your codesandbox didn't have yet
I have the following router structure:
<Router>
<Switch>
<Route exact path={'/books'}>
<p>All books</p>
</Route>
<Route path={'/books/:bookId'}>
<p>book with ID</p>
</Route>
</Switch>
</Router>
Whenever I navigate to /books/:bookID, after a split second there, I got redirected back to /books. No Redirects present, but I got pushed back to /books with putting url manually, or using history.push().
<Link /> can't be used, but it didn't help as well.
<Button onClick={() => history.push('/books/5')}>Go to book 5</Button>
Would be glad to any hint on this matter.
<BrowserRouter>
<section className='section'>
<Navbar />
<Switch>
<Route exact path='/' component={Articles} />
<Route path= '/football' component={Articles} />
<Route path= '/cooking' component={Articles} />
<Route path= '/coding' component={Articles} />
<Route path= '/article/:id' component={ArticleById} />
<Route path= '/articles/comments' component={ArticleComments}/>
<Route component={NoMatch} />
</Switch>
</section>
</BrowserRouter>
so the route '/article/:id' and '/articles/comments' fails to load anything when i take thhe '/:id' or the '/comments' off the path the components load.
The problem is that your project is NOT using server side routing. I placed a component in your parent Component (Articles) and clicked that link (which was set to go to article/1
e.g.
<Link to="/article/1">CLICK HERE</Link>
and it worked just fine. However, type in the URL bar
http://localhost:9000/article/1
does not work...here's why...
If you don't have server side routing setup, then when you make a BROWSER based request (which is what you're doing via the URL bar) it will send off a request for the content at the location in the URL. The reason you're getting 404 NOT FOUND errors is because you're expecting webpack-dev-server to know that when you type /articles/1 it should serve a component, but as far as it can tell you've actually requested a folder called articles with a file called 1.
Because of this, you need a server to handle browser requests for locations.
You need a static router to match the request url to a path on your routes file which will in turn "return" that component to the browser.
When you use a
<Switch> in React Router it will render the FIRST component that matches that path.
Is it rendering your NoMatch component when you have :id?
For /comments you should use a subroute e.g.
<Route path='/articles'>
<Route path='/comments' component={ArticleComments} />
</Route>
As #Joshua Underwood says, the fact is webpack-dev-server try to fetch your script in nowhere. But I don't think it is the correct answer based on the fact that other route is work perfectly. So, that is to say the problem is neither due to webpack-dev-server or react but your index.html itself.
I bet you have set historyApiFallback: true in webpack.config.js, and also you point your bundle.js something like bundle.js or .\bundle.js, which you should set it as \bundle.js. Otherwise, although the server handle the fallback correctly, but your index.html file have no idea which path it was found, and try to anchor your script based on the wrong path level.
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?
I used a code similar to the code mentioned below in my app using React Router.
<Route path="/" handler={App}>
<Route path="login" handler={LogIn}/>
</Route>
Suppose I have created a header field in App file like "Welcome to the page",it shows while running. But if I use another header for Log In page like "welcome to log in page",while running it shows like
Welcome to the page
Welcome to log in
means it attach new header with the previous page's. But I want to use the header differently. So, how can I do that?
This happens because your Login component is mounted inside App component so everything in the App component will be always visible. Think about it as having box inside the box. The solution to that would be to:
if you're using version 0.13.x: make use of DefaultRoute (check the example in the 0.13.x docs)
if you're using version 1.0.0-rc3: make use of IndexRoute
and then you just put your header in a new component which will be mounted when you hit / URL.
Your routes would look something like:
version 0.13.x:
<Route name="app" path="/" handler={App}>
<Route name="login" handler={Login}/>
<DefaultRoute handler={Header}/>
</Route>
version 1.0.0-rc3:
<Route path="/" component={App}>
<IndexRoute component={Header} />
<Route path="inbox" component={Login} />
</Route>
Just as a side note as that would be probably your next question:
React Router 1.0 provides very nice API for handling the authentication, I guess this is something you are trying to do. If that's the case, have a look at the auth-flow example. And the onEnter.