How to use different routes with react? - javascript

Could anyone help me with this question?
I'm a bit lost when using different routes containing subroutes.
I am trying to add routes with different paths.
I would like to have a default route with all the features and an alternate Event route separately.
From now on I am grateful for the attention and thank you very much.
index.js
Contains the two different routes. Layout and Event.
The Route Layout contains another Routes component inside.
const Root = (
<BrowserRouter>
<Route component={App}>
<Route component={Layout}/>
</Route>
<Route path="/event/:id" component={Event}/>
</BrowserRouter>
)
ReactDOM.render(Root , document.getElementById('root'));
App.js
Component to be loaded. Layout or Event
class App extends Component {
render() {
const { children } = this.props;
return (
<div>{children}</div>
);
}
}
export default App;
RouterLayout.js --> This route is a subroute that is inside the Layout
const Router = () => (
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
</Switch>
)
export default Router
Layout.js
class Layout extends Component {
render() {
const { children } = this.props;
return (
<Content className="column is-8 content-page">
<RouterLayout/>
<div>{children}</div>
</Content>
);
}
}
export default Layout;

I was able to solve this way
<BrowserRouter>
<div>
<Route exact path="/page/*" component={Layout}/>
<Route exact path="/event/:id" component={EmptyLayout}/>
</div>
</BrowserRouter>

Related

No routes matches for nested routing

I have simple web page and i have trouble with routing:
Index.tsx:
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<HomePage />
</React.StrictMode>
);
Homepage:
const HomePage = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Main/>}>
</Route>
<Route path="/login" element={<Login/>}>
</Route>
<Route path="/register" element={<Register/>}>
</Route>
</Routes>
</BrowserRouter>
)
};
export default HomePage;
This works as intended -> if user goes to 'www.example.com' Main component is rendered, if user goes to 'www.example.com/login Login` component is rendered and so on.
However, inside my Main component i also want to use routing:
const Main = () => {
return (
<div className="app">
<HomePageHeader/>
<Routes>
<Route path="/" element={<HomePageFeed/>}>
</Route>
<Route path="/animal" element={<AnimalSelection/>}>
</Route>
<Route path="/animal/:id" element={<Animal/>}>
</Route>
</Routes>
</div>
)
}
export default Main;
Main component has header for every content, however depending on the route i want to display different things, for / some default info, for /animal some menu and list of animals, and for /animal/:id info of specific animal.
However, when , inside HomePageFeed i try to redirect there:
let history = useNavigate(); history("/animal")
I get error: router.ts:11 No routes matched location "/animal"
What is correct way how to handle routing such as this? Is this corretly used routing?
Thanks for help!
My opinion is to have a single routing inside your application. Keep your routing part inside your App.js and share it in all your pages.
If you strictly want it to be in different component. Try wrapping the routes in the Main.tsx inside BrowserRouter might work. The problem might be because <Main /> component is not wrapped anywhere inside the BrowserRouter. Try like below,
const Main = () => {
return (
<div className="app">
<HomePageHeader/>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePageFeed/>}>
</Route>
<Route path="/animal" element={<AnimalSelection/>}>
</Route>
<Route path="/animal/:id" element={<Animal/>}>
</Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default Main;

Not showing any thing on screen while applying authentication in react.js

I was applying authenication in my project in React.js by using protectes routes. First i was using Redirect component from react-router-dom but then i have found out the changes they made in react-router-dom than i applied the navigate component.
import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom';
import './App.css';
import Navigation from './components/shared/Navigation/Navigation';
import Authenticate from './pages/Authenticate/Authenticate';
import Home from './pages/Home/Home';
import Login from './pages/Login/Login';
import Register from './pages/Register/Register';
const isAuth = true;
function App() {
return (
<div className="App">
<BrowserRouter>
<Navigation/>
<Routes>
<Route exact path='/' element={<Home/>}></Route>
{/* <Route exact path='/register' element={<Register/>}></Route>
<Route exact path='/login' element={<Login/>}></Route> */}
{/* <Route exact path='/authenticate' element={<Authenticate/>}></Route> */}
<GuestRoute exact path='/authenticate' element={<Authenticate/>}></GuestRoute>
</Routes>
</BrowserRouter>
</div>
);
}
const GuestRoute = ({children,...rest}) =>{
return(
<Route {...rest} render = {({location})=>{
return isAuth ?(
<Navigate to = '/rooms'state = {{from : location}} replace />
)
:(
children
)
}}></Route>
)
}
export default App;
This is my code after using the navigate component my screen not showing any thing there must be some kind of logical error in it. Kindly help me to resolve this error.
your app is showing nothing because the route /rooms does not match any routes in the <Routes /> component

Auth0 ProtectedRoute component preventing component from changing with state

I followed the Auth0 React Authentication guide written here:
https://auth0.com/blog/complete-guide-to-react-user-authentication
And implemented the ProtectedRoute component as outlined in the tutorial:
import React from "react";
import { Route } from "react-router-dom";
import { withAuthenticationRequired } from "#auth0/auth0-react";
import { Loading } from "../components/index";
const ProtectedRoute = ({ component, ...args }) => (
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => <Loading />,
})}
{...args}
/>
);
export default ProtectedRoute;
But now I am having an issue with the ProtectedRoute component that doesn't exist if I use withAuthenticationRequired directly in the export statement of the component that I am trying to protect. I have a web app that contains routes like the following:
<Router>
{isAuthenticated && <Header />}
<Switch>
<Route exact path='/'>
{isAuthenticated ? <Redirect to="/home" /> : <LandingPage />}
</Route>
<ProtectedRoute path='/home' component={Home}/>
<ProtectedRoute path='/events' component={Events}/>
<ProtectedRoute path='/dates' component={Dates}/>
</Switch>
</Router>
And my Home component contains something like the following:
function Home(){
return <div className="home-page">
<Sidebar />
<ProtectedRoute path={"/home/dogs"} component={Dogs}/>
<ProtectedRoute path={"/home/cats"} component={Cats}/>
</div>
}
export default Home;
The bug also happens when the Home component doesn't use ProtectedRoute like so:
function Home(){
return <div className="home-page">
<Sidebar />
<Route path={"/home/dogs"} component={Dogs}/>
<Route path={"/home/cats"} component={Cats}/>
</div>
}
export default Home;
I can't explain why it happens, but it prevents the state within the Sidebar component from changing the sidebar's appearance and rendered components.
Here is a link to a codesandbox on how the sidebar should work (no auth0).
https://codesandbox.io/s/react-routing-problem-2efic
When using ProtectedRoute as in the code above, the active class on the navbar links changes, but the rest of the content stays the same.
However, if I instead take the ProtectedRoute off of the Home component, but use withAuthenticationRequired on the export of the Home component, like so:
export default withAuthenticationRequired(Home, {
onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});
and
<Route path='/home' component={Home}/> //instead of ProtectedRoute
Then everything works as it should.
My questions are:
Why is the ProtectedRoute component behaving differently from when withAuthenticationRequired is at the export level?
Do I need to protect routes that are nested within a protected route?
Thanks for any help!

React Router add condition if route is not present

I am new to the react-redux. Here I am using the following thing for showing the 404 not found if the given route does not matches.
now, In this
My App.js
class App extends React.Component {
render() {
return (
<Provider store={store}>
<div className="container-fluid">
<Header />
<Main />
</div>
</Provider>
)
}
}
My Main.js
render() {
return (
<div>
<Router history={history}>
<div>
{this.props.isFetching && <Loading />}
<Switch>
<PrivateRoute exact path="/" component={LandingScreen} />
<PrivateRoute exact path="/quiz-setup" component={QuizSetupMain} />
<PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/*" component={NotFound} something="foo" />
</Switch>
</div>
</Router>
</div>
)
}
}
NotFound.js
import React from 'react';
export default class NotFound extends React.Component {
render() {
return (
<h1>Something Went Wrong</h1>
);
}
}
Now , here when user hits any route which is not present then it shows that 404 not found, but it also shows the header part as well. I know that , its because I have rendered both header and main in the app.js file, and not found is in the main, but is there any way to not show that header , if the route is not matched . thanks
You can add function, which returns Component after Header.
for example:
const withHeader = (Component) => {
return class withHeaderComponent extends React.Component{ render() { return (<div><Header /><Component /></div>)}}
}
after creating this function, you can use it like,
<Route exact path="/login" component={withHeader(LoginComponent)} />.
So you are able to add header for Routes you want.
<Route component={NotFound}/>
Now your 404 will be without Header !
Let me know if you face difficulties.
You can use the component of dynamic components.
The idea is, every route path that is called, navigates through a common component which invokes suitable behaviour based on the component called. For example -
<PrivateRoute exact path="/" component={CustomComponent} />
and then pass props accordingly to determine, which screen has to render the header component.
So, essentially, your code will look something like this -
class App extends React.Component {
render() {
return (
<Provider store={store}>
<div className="container-fluid">
<Main />
</div>
</Provider>
)
}
}
and the <Header/> component will be called in custom component based on appropriate conditions that you put forward
Hope it helps :)
You can also use a wildcard to redirect people to not found page the route is not accessible.
import React from 'react';
import { Switch } from 'react-router';
import { BrowserRouter , Route ) from 'react-router-dom;
import NotFound from './NotFound';
const routes = (
<BrowserRouter>
<Switch>
<Route path="*" component={NotFound}/>
</Switch>
</BrowserRouter>
)

Problems with routes with react router and radium

I'm working on a website on reactJS. I use radium and react router for the routes.
I have a lot of problems with routes...
On my main page there is a fixed nav bar menu with a link to the documentation page.
On this documentation page I also have this bar but to access to other links I have to click 2 times to get there..
class App extends Component {
render() {
return (
<Router history={hashHistory}>
<Switch>
<Route exact path="/" component={LandingPage}/>
<Route path="/documentation" component={DocumentationRoutes}/>
<Route path="/blog" component={OnContrustion}/>
<Route path="/contactus" component={OnContrustion}/>
</Switch>
</Router>
);
}
}
export default App;
Here is the DocumentationRoutes:
class DocumentationRoutes extends Component {
render() {
return (
<Router history={hashHistory}>
<Switch>
<Route path="/documentation" component={Documentation}/>
<IndexRoute component={Documentation} />
</Switch>
</Router>
);
}
}
export default DocumentationRoutes;
and the documentation :
class Documentation extends Component {
render() {
return (
<VerticalLayout>
<StretchLayout>
<NavBar />
</StretchLayout>
<StretchLayout margin="20">
<CenterLayout>
<SubTitle>Documentation</SubTitle>
</CenterLayout>
<DocMenu />
</StretchLayout>
</VerticalLayout>
);
}
}
export default Documentation;
Is it the right way to use react router ?
What can I do to be redirected after only one click ?
On the first click, the url change correctly but not the page.
Thanks,
You only need to use the Router component in the initial routes definition. Your DocumentationRoutes component should be:
Also in react-router v4 IndexRoute no longer exists.
class DocumentationRoutes extends Component {
render() {
return (
<Switch>
<Route path="/documentation" component={Documentation}/>
<Route component={Documentation} />
</Switch>
);
}
}
export default DocumentationRoutes;

Categories