Create routes

Create routes

Create routes

Create routes

Create routes

DoksJS routes define how your application will be navigated. They are declarative, meaning that you can define the desired route and DoksJS will take care of the rest.

DoksJS routes define how your application will be navigated. They are declarative, meaning that you can define the desired route and DoksJS will take care of the rest.

DoksJS routes define how your application will be navigated. They are declarative, meaning that you can define the desired route and DoksJS will take care of the rest.

2

2

min read

min read

Mitchell Bernstein

To create a DoksJS route, you need to create a JavaScript object that specifies the route's path, component, and other options.

Here is an example of a DoksJS route that defines a home page:


const homeRoute = {
  path: '/',
  component: HomeComponent,
};


This route specifies that the home page is located at the root path (/) and that the HomeComponent component will be used to render the page.

To add a route to your application, you need to add it to the routes property of the App component.

Here is an example of an App component that adds the home route:


class App extends Component {
  render() {
    return (
      <Routes>
        <Route path="/" component={HomeComponent} />
      </Routes>
    );
  }
}

export default App;


This code will add the home route to the application. When the user navigates to the root path (/), the HomeComponent component will be rendered.

You can also create routes that have parameters. For example, the following route defines a route that takes a name parameter:


const userRoute = {
  path: '/users/:name',
  component: UserComponent,
};


This route specifies that the user page is located at the /users/:name path and that the UserComponent component will be used to render the page. The :name parameter will be passed to the UserComponent component as a prop.

To use a route with a parameter, you need to pass the value of the parameter to the route's path. For example, the following code will navigate to the user page for the user with the name "John Doe":


const router = new Router();
router.navigate('/users/John Doe');


This code will navigate to the /users/John Doe path, which will render the UserComponent component with the name prop set to "John Doe".