score:0
import react from 'react'
import reactdom from 'react-dom'
import {hashrouter, route, switch, navlink} from 'react-router-dom'
class app extends react.component {
render() {
return (
<hashrouter>
<switch>
<route path="/login" component={login} />
<route path="/register" component={register} />
<route path="/" component={apphome} />
</switch>
</hashrouter>
)
}
}
const login = () => (
<div>
login content <navlink to="/apphome"> go to app</navlink>
</div>
)
const register = () => <div> register content </div>
const apphome = () => <div> welcome to the app </div>
export default app
reactdom.render(<app />, document.getelementbyid('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
can you please check this codesandbox once.
score:1
you are trying to nest the routes, but in your case this seems unnecessary.
i would setup my routes like this without nested routing:
import react from "react";
import {
browserrouter,
route,
switch,
navlink,
redirect
} from "react-router-dom";
class app extends react.component {
render() {
return (
<browserrouter>
<authenticate />
<switch>
<route path="/" exact component={login} />
<route path="/login" component={login} />
<route path="/register" component={register} />
<route path="/apphome" component={apphome} />
</switch>
</browserrouter>
);
}
}
const login = () => (
<div>
login content <navlink to="/apphome"> go to app</navlink>
</div>
);
const register = () => <div> register content </div>;
const apphome = () => <div> welcome to the app </div>;
class authenticate extends react.component {
render() {
return (
<>
<div>
<navlink to={"/login"}> login </navlink>
<navlink to={"/register"}> register </navlink>
</div>
</>
);
}
}
export default app;
Source: stackoverflow.com
Related Query
- React Router Links getting Change but not the View
- My React Router Links are not working. It's showing the url change in the browser but contents are not showing
- React Router v5: history.push() changes the address bar, but does not change the page
- React router changes url but not the view (only on Internet Explorer 11)
- React router goes to proper URL but does not update the view
- Reactjs - changing url using react router but the component does not change
- In react Router i cant change the view but only the url is changing
- I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered
- React router changes url but not view
- React router 4 does not update view on link, but does on refresh
- Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?
- React Router Redux go action is shown in the LogMonitor but doesn't change the path on browser
- react router changes the URL, but the component is not rendered
- React router does not change view, but url is changed - App is load inside iframe
- URL changing but view is not changing in React Router 4
- React Router change the address but doesn't load the second page
- REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state
- View wont update but the URL does in React Router V6
- React router changes url but not loading view
- React reach router link tag updates url but not the component
- React Router - route using MemoryRouter and Router together (Some links use memory while others change the url)
- Why is React Router taking me to the correct path, but not displaying the corresponding component?
- React router is changing the URL but not loading the webpage properly
- Using React Router the <Redirect /> Does not redirect anywhere, but why?
- Even if a state has been changed, but the view has not been rendered again in React / Next.js
- Redrawing or Reinitialising Windyapi in React Js but it is not load after I change the Route
- React Router change the link but can't changed the body
- React : useEffect updates the state, but does not re-render the view
- React Router Link is not working. The Route changes but the component doesn't get rendered
- the routes change but the pages are not shown in my react app
More Query from same tag
- react-hook-form custom validation message not showing
- Document.createElement Download PDF Not working in IE
- Changing text on button push (React.js)
- Is there a secure way to use React.js with a Python Flask backend for a multi-user, password protected site
- React: How to create table from the following json
- How to handle multiple Contexts using React Context API?
- Redux Form - You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
- Webpack3 CSS/LESS is not working when imported from React ES6
- How can I acces a nested object from my API
- How do programmatically slide (using transitions) to another route after n seconds in React?
- How to check if long list got rendered in React
- Can we share code between react webapp and react native app and is react-native production ready
- How can I get the form values on the submit event of a Redux-Form?
- Spread operator is not working in react typescript
- HTML5 input type file, how can I increase the amount of files i can upload?
- React.useMemo does not update the data
- Should I be using React State for user-interactions (to toggle visibility classes)?
- Destruct object properties in array.map() and keep object as parameter
- How to assign a new var based on a disabled/enabled button?
- Update template variable from react panel plugin
- Is it valid to use a function in reducer?
- How to test in jest for target instanceof window.Window
- Accessing basename of BrowseRouter
- Converting from React.js to React.tsx Property 'id' does not exist on type 'never'. TS2339
- React Redux with Router Location, Pagination / Sorting and Fetch
- How to disable button depending on the length of input value
- How to dispatch an action when a button is clicked?
- How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
- How do I stack two containers when they're in different components?
- Material UI Potential Slow Performance of withStyles